Solution to the blank page after vue.js packaged project

I believe that many partners who have just come into contact with Vue will encounter such a problem, that is, the Vue project is normal in the development environment, but after packaging, the index.html page is blank when opened, and such an error is found when opening the console

There are two ways to deal with this situation (vue-cli2 and vue-cli3). Let's talk about vue-cli2 first. First, find the config/index.js file and change the path of assetPublicPath to "./".

Vue-cli3 is a little more troublesome, because vue-cli3 is much simpler and has no configuration file, so you need to create it yourself. You can only create it in the root directory of the project, and the name of the file can only be vue.config.js, and then add the following code to this file

module.exports = {
    assetsDir: 'static',
    parallel: false,
    publicPath: './',
} 

It should be fine at this step, but some friends still don't show it. That's because of your routing mode. You just need to change your routing mode to "hash". Although it's a bit ugly, at least the function is out. If you don't want to use the "hash" mode and have to use the historical mode, it won't work locally. You must use the server. Here's how to use nginx with vue to use the historical mode

I won't talk about installing nginx. Assuming you have already installed nginx, add

location /aaa {undefined
            alias D:/bbb/ccc;
            index index.html index.htm;
            try_files $uri $uri/ /aaa/index.html;
        }

Among them, /aaa is the address to be accessed, D:/bbb/ccc is the path where your file is actually stored, index refers to your entry file, if your file name is not index.html, replace it with the name of your entry file. The most important thing here is try_files $uri $uri/ /aaa/index.html, which is mainly used to handle the history mode of vue. After configuring nginx, you need to add something to the project. In fact, it is also very simple. Just add it to the src directory of the project.

Add in config/index.js

Otherwise, refreshing the page will result in a 404 error. Of course, this is when the project is placed in the secondary route. If it is a primary route, you don't need to add the base attribute.

The final effect is as follows.

This completes the process of vue packaging to deployment. I hope it will be of some help to everyone.

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.