How to solve the problem of blank page when opening a vue project after packaging

This article mainly introduces the solution for opening the blank space after the vue project is packaged. The content is quite good. I will share it with you now and give it as a reference.

Many people on the Internet say that the list file generated by packaging their VUE projects through Webpack is packaged in HBulider and then opened on the mobile phone. The main reason for this is the path problem.

1. Remember to change the export path of the bulid module in index.js under config. Because the content in index.html is introduced through script tags, and your path is wrong, it will definitely be blank when opened. Let’s take a look at the default path first.

module.exports = {
 build: {
 env: require('./prod.env'),
 index: path.resolve(__dirname, '../dist/index.html'),
 assetsRoot: path.resolve(__dirname, '../dist'),
 assetsSubDirectory: 'static',
 assetsPublicPath: '/',
 productionSourceMap: true,

The default assetsPublicPath is ‘/’ which is the root directory. Our index.html and static are in the same directory. So it needs to be changed to ‘./ ‘

2. There is another point to note. The default mode in the router/index.js routing configuration in src is hash. If you change it to history mode, it will be blank when you open it. So change it to hash or delete the mode configuration directly and make it the default. If you must use the history mode, you need to add a candidate resource on the server that covers all situations: if the URL does not match any static resources, it should return an index.html, which is the page your app depends on.

// mode: 'history' // 默认hash

If you don’t know how to package the vue project, please read another detailed tutorial I wrote: Vue webapp project packages native APP through HBulider

The above is the entire content of this article. I hope it will be helpful to everyone's study. For more related content, please pay attention to the PHP Chinese website!

Related recommendations:

How to solve the problem of blank page after routing History mode packaging under Vue

How to solve the problem of Vue WeChat authorized login The problem of front-end and back-end separation

The above is the detailed content of How to solve the problem of blank page when opening a vue project after packaging. For more information, please follow other related articles on the PHP Chinese website!