vue-cli 打包部署到子目录下，配置文件的更改

vue 打包后 静态文件路径不对的问题

之前做项目的时候，用 npm run build 打包部署后，访问页面发现背景图丢了，打开控制台后发现，静态资源等请求路径报404的错误，

从上图报错能够看到路径显示不对

后面百度发现，其实在我们准备打包项目之前，需要考虑的一个问题是：【我们的项目最终是要部署在根目录还是子目录】

路径查看后，发现我的项目是被部署在子目录下，所以用绝对路径，就会出现之前我的报错

如果你要在子目录部署的化，你的config/index.js配置中，需要将 assetsPublicPath:'/ '（绝对路径）,更改为 './'（相对）,下面上代码

build: {
		env: require('./prod.env'),
		index: path.resolve(__dirname, '../dist/index.html'),
		assetsRoot: path.resolve(__dirname, '../dist'),
		assetsSubDirectory: 'static',
		assetsPublicPath: './',  //./代表相对路径，/代表绝对路径,有些项目层级目录较多，可更改为../
		
	},

与此同时呢，由于我们在 css 中使用了相对路径来引入图片。那么，打包后，我们的 css 会抽离出来为一个单独的 css 文件，这个时候， css 和 图片 之间的一个相对路径关系就改变了。为了解决这个问题，我们需要在 build/utils.js 中，增加一个 pablicPath 的配置，下面上代码

if (options.extract) {
      return ExtractTextPlugin.extract({
        use: loaders,
        publicPath: '../../',//作用是设置打包过程中提取css的方法，更改注入路径
        fallback: 'vue-style-loader'
      })
    } else {
      return ['vue-style-loader'].concat(loaders)
    }

将配置文件中的这两处，更改完成后，再次进行打包，丢失的静态文件就回来了