css图片打包后路径的问题

css图片打包后路径的问题

build项目然后部署，出现了css图片路径错误的问题

a. 修改config文件夹中的assetsPublicPath

从 assetsPublicPath: ‘/’, =》 变为 assetsPublicPath: ‘./’, 两处assetsPublicPath都修改

结果：出现npm run dev 启动成功，页面加载不出，控制台报错404

解决问题：开发环境下，dev的assetsPublicPath必须是’/’

结论：只修改build里面的assetsPublicPath为 ‘./’

b. 修改配置文件中的请求

env.js中的中的反代/proxy

c. 修改原项目中的图片路径

由于assetsPublicPath的改变，部分图片路径需要跟着改变

d. 在 build->utils.js 中加入一句publicPath: ‘../../’

本来：

if (options.extract) {
			return ExtractTextPlugin.extract({
				use: loaders,
				fallback: 'vue-style-loader'
			})
		} else {
			return ['vue-style-loader'].concat(loaders)
		}

加上后：

if (options.extract) {
			return ExtractTextPlugin.extract({
				use: loaders,
				publicPath: '../../',
				fallback: 'vue-style-loader'
			})
		} else {
			return ['vue-style-loader'].concat(loaders)
		}