在工作当中，我使用webpack打包的dist，由于管理的问题，无法被放在服务器根目录下 ，但在目前的vue配置，dist不放在根目录下，访问页面会成为一片空白，于是便要对vue框架的config进行配置修改。
首先对vue中config文件夹的index.js做配置，将build.assetsPublicPath由绝对路径改为相对路径
build: { // Template for index.html index: path.resolve(__dirname, ‘../dist/index.html‘), // Paths assetsRoot: path.resolve(__dirname, ‘../dist‘), assetsSubDirectory: ‘static‘, assetsPublicPath: ‘./‘, //原本默认为 / 改为 ./相对路径 }
这样就可以放在其他目录下访问了！
然后还会出现一个问题，dist打包的图片在服务器上可能出现无法访问的情况，这种情况多数是因为图片路径不对，所以我们还需要对vue的build文件下的utils.js做修改，将generateLoaders方法中判断options.extract的return中添加 publicPath:‘../../‘，请注意publicPath的../，与你后端所放dist的层级有关。
function generateLoaders (loader, loaderOptions) { if (options.extract) { return ExtractTextPlugin.extract({ use: loaders, fallback: ‘vue-style-loader‘, publicPath:‘../../‘ //这个../与dist所在层级有关 }) } else { return [‘vue-style-loader‘].concat(loaders) } }
原文：https://www.cnblogs.com/boylxx/p/12017000.html