In fact, many people have written this online, why do I still write this blog? Because I personally trampled on the pit of their production (spreading hands).
Start the text
This project is based on the project generated by vue-cli, and adopts the history model of vue-router. I believe most people are still similar here. The next step is a huge pit that many online blogs are using.
When packaging, many blogs wrote, changing assetsPublicPath in build from / to ./ under /config/. I regret why I didn’t think about why, why did I do this? Why? If there is any problem with this, why does webpack not change and keep putting it there when it is generated? Who is stupid? Let’s put the questions here first, let’s follow those tutorials first. After modifying npm run build, a dist folder will be generated under your project, which is the generated static content. Suppose your dist folder is already in your cloud server now. Next, start the configuration of nginx.
I personally use nginx installed by sudo apt-get install nginx. Now it is under the command line.
cd /etc/nginx//, and in this directory sudo touch, then modify the content of the file.
server {
listen 3000; # Suppose your project is listening on port 3000 root /path/to/dist;
location / {
try_files $uri $uri/ /;
}
}
Then
sudo nginx -t checks the correctness, and sudo nginx -s reload after correctness.
Next, visit cloudserverhost:3000 in your browser to access your project homepage.
It seems that everything is going well at the moment. The online tutorial is great~
Then you can try refreshing under cloudserverhost:3000/path/subpath. You will find that the page is gone, an error will be reported in the browser, and you will find that the requested js/css, etc. have become the content of the html page. This problem lies in./. I don’t know if the first person who wrote this is lucky to have only a first-level path, or he never tries to refresh the page, otherwise this problem is inevitable. Why? ./ is a relative path, and / is an absolute path. When you refresh and re-request resources under the secondary path, what is your request path? If we write the request path out, we will find out what the problem is. It's very sad. It took me less than 10 minutes to write this blog, but it took me about 10 hours to find this problem. I checked various methods, but I never expected it.
Therefore, there is no need to modify assetsPublicPath in the build under /config/. Configure nginx and your project can start taking off!
The above example of Vuejs+vue-router packaging + Nginx configuration is all the content I share with you. I hope you can give you a reference and I hope you can support me more.