Home  >  Article  >  Web Front-end  >  What to do if vue package refresh error is reported

What to do if vue package refresh error is reported

藏色散人
藏色散人Original
2022-12-30 15:37:392463browse

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.

What to do if vue package refresh error is reported

#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:

What to do if vue package refresh error is reported

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!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn