问题描述:使用vue-cli脚手架工具生成的vue项目,使用npm run build后生成的文件直接双击打开白屏一片。
解决方案:
-
第一步:修改build文件夹下utils.js,在以下位置加入
if (options.extract) { return ExtractTextPlugin.extract({ use: loaders, fallback: 'vue-style-loader', //用于解决build后静态文件路径找不到的问题(新加的代码) publicPath: '../' }) } else { return ['vue-style-loader'].concat(loaders) } 复制代码
-
第二步:修改config文件夹下的index.js文件,在以下位置进行修改,注意是build对象中:
build: { // Template for index.html index: path.resolve(__dirname, '../dist/index.html'), // Paths assetsRoot: path.resolve(__dirname, '../dist'), assetsSubDirectory: 'static', //用于解决build后文件路径找不到的问题(修改为./) assetsPublicPath: './',复制代码