Solution of Displaying Blank after vue Packaging Static Resources and Error Reporting of static File Path

Today, I encountered several pits when I used vue packaging (npm run build), which I would like to share with you here

The page that opens dist after packaging shows blank:

This problem has been dealt with before, and it is one of the most frequent errors in the packaging process, which may occur in three places

1. Remember to change the path exported by bulid module in index. js under config. Because the contents of the packaged index. html are all introduced through the script tag, the default display path is wrong, and it must be blank when opened.

build: {
  index: path.resolve(__dirname, '../dist/index.html'),
  assetsRoot: path.resolve(__dirname, '../dist'),
  assetsSubDirectory: 'static',
  assetsPublicPath: '/',
  productionSourceMap: true,
  devtool: '#source-map',
  productionGzip: false,
  productionGzipExtensions: ['js', 'css'],
  bundleAnalyzerReport: process.env.npm_config_report
 }

You need to change assetsPublicPath: '/' to assetsPublicPath: './',

2. The default mode in router/index. js routing configuration is mode: 'hash' (# will be added to the route on the page). Sometimes, if it is changed to history (pure route) mode, it will be blank when opened. So change to hash or delete the mode configuration directly and let it default.

export default new Router({
//mode: 'history',
mode:'hash',\\ Or don't write it directly 
 routes: [{}]
)}

3. It is also possible that the background image path is not configured, and the configuration publicPath: '../../' needs to be added in build/utils. js

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

Response path not found after packaging:

These are common solutions, If you introduce the picture path of a static resource as binding data as js, What should I do if the picture is put into static to introduce this page? If you access vue in an absolute path, you will not handle this class 1 package, so the path of its picture access will not change after packaging, and only the static folder that index. html and webpack will not handle after packaging Webpack (files under vue static/will not be processed by Webpack: they use the same file name and copy directly to the final path)

There are two solutions,

1. If you want to go online, you need to add your main domain name before static, and then he will access the packaged files step by step.

return {
 isShow:true,
 imgData:'',
 myUpPic:'/yourDN/static/img/logo.png'
}

2. Because vue configures the path for components to access static resources, You can directly/static to find the files under static, but the problem here is that when you visit it, it accesses these files step by step, so after packaging, he will still not find the files of static resources. Here you need to change/static to./static, so that he will directly access the static resources folder under the packaged folder.

return {
 isShow:true,
 imgData:'',
  //myUpPic:'/static/img/logo.png' 
 myUpPic:'./static/img/logo.png'
}

The above is a personal deal with vue packaging bug 1 small experience, I hope these can be helpful to everyone.

Supplementary knowledge: There are more paths after vue packaging/css/static

After vue is packaged, the path/css/static is added, resulting in 1 css attribute effect not being displayed.

Solution:

Add publicPath: '…/…/' to the build/utils. js file and repackage.

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