What to do if vue package refresh error is reported

Solution to vue package refresh error: 1. Change the "mode" of vue router to "hash"; 2. Modify Nginx to "location / {root ...index ...try_files $uri $ uri/ /index.html;}"; 3. Modify Apache to "RewriteRule . /index.html [L]" and save it.

#The operating environment of this tutorial: Windows 10 system, Vue version 3, Dell G3 computer.

What should I do if vue packages and refreshes an error?

Vue project refreshes and reports 404 after deployment. Solution

1. Reason

Due to the use of vue router mode in the project built by vue before The default mode hash, the 404 will not appear when refreshing the page after the project is packaged and deployed.

However, due to project requirements, the mode of vue router was changed to history. As a result, there was no problem in jumping to the page. When refreshing the page, it reported 404 error

2. Solution:

Option 1: Change the mode of vue router to hash

Option 2: nginx modification

location / {
  root ...
  index ...
  try_files $uri $uri/ /index.html; ---解决页面刷新404问题
}　

As shown:

Warning:

Because after doing this, your server will no longer return a 404 error page, because the index.html file will be returned for all paths. To avoid this, you should cover all routing situations in your Vue application and then present a 404 page. Or, if you are using Node.js as the backend, you can use server-side routing to match the URL, and return 404 when no route is matched, thereby implementing fallback.

const router = new VueRouter({
  mode: 'history',
  routes: [
    { path: '*', component: NotFoundComponent }
  ]
})

Option 3: Apache

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /index.html [L]
</IfModule>

Recommended learning: "vue.js Video Tutorial"

The above is the detailed content of What to do if vue package refresh error is reported. For more information, please follow other related articles on the PHP Chinese website!