Nginx部署Vue專案動態路由重新整理404
阿新 • • 發佈:2022-03-03
目錄
- End -
- 個人筆記 -
以上為本篇文章的主要內容,希望大家多提意見,如果喜歡記得點個推薦哦 作者:Maggieq8324 出處:https://www.cnblogs.com/maggieq8324/ 本文版權歸作者和部落格園共有,歡迎轉載,轉載時保留原作者和文章地址即可。
前言
- 記錄下
Nginx
部署Vue
專案重新整理404
的解決方案,遇到了兩次,route
用的是history
路由模式,動態路由:
{
path: '/article/:blogId',
name: 'blog',
component: blog
}
- 然後部署
nginx
,
location / {
root /usr/local/nginx/html/blog/;
index index.html index.htm;
}
- 然後重新整理頁面
what happend?
- 後請教了度娘,度娘回答
location / { root /usr/local/blog/; index index.html index.htm; try_files $uri $uri/ /index.html; }
- 再然後
what happend?
好吧,記錄下兩次的解決方案,先行感謝兩位大佬給的啟發
第一次
網站沒有申請二級域名,部署了多專案,所以想的是新增專案字首'/blog'
訪問,比如這個:
https://www.coisini.club/blog
router.js
mode: 'history', routes: [ { path: '/blog', // 部落格首頁 component: home, children: [ { path: '/', component: index }, { path: '/blog/article/:blogId', name: 'blog', component: blog }, ....
build.js
出錯打包配置
assetsPublicPath: './',
正確打包配置
assetsPublicPath: '/blog/',
- 就是這個
assetsPublicPath
資源路徑忘記配置惹了N
多麻煩, 留下了不學無數的眼淚,如果有遇到同樣場景的同學記得核實
nginx.conf
有兩種配置方式,均驗證有效 方式一: location /blog { root /usr/local/nginx/html/; index index.html index.htm; try_files $uri $uri/ /blog/index.html; } 方式二: location /blog { root /usr/local/nginx/html/; index index.html index.htm; try_files $uri $uri/ @rewrites; } location @rewrites { rewrite ^/(blog)/(.+)$ /$1/index.html last; }
LATER
第二次
網站申請了二級域名,之前的配置都要修改了,比如這樣:
https://blog.coisini.club/
router.js
mode: 'history',
routes: [
{
path: '/',
component: index
},
{
path: '/article/:blogId',
name: 'blog',
component: blog
},
....
build.js
assetsPublicPath: './',
nginx.conf
server {
listen 443 ssl;
server_name blog.coisini.club;
location / {
root /usr/local/blog/;
index index.html index.htm;
}
}
- 然後部署
- 然後照例請教度娘,度娘說
try_files $uri $uri/ /index.html;
location / {
root /usr/local/blog/;
index index.html index.htm;
try_files $uri $uri/ /index.html;
}
- 然後
-
然後,看了無數篇一毛一樣的部落格後,找到了這位
空虛公子
的vue部署在nginx後重新整理404,雖然你腎虛,但我還是
-
正確的寫法:
-
build.js
assetsPublicPath: '/',
nginx.conf
location / {
root /usr/local/blog/;
index index.html index.htm;
try_files $uri $uri/ /index.html =404;
autoindex on;
}
LATER
以上為本篇文章的主要內容,希望大家多提意見,如果喜歡記得點個推薦哦 作者:Maggieq8324 出處:https://www.cnblogs.com/maggieq8324/ 本文版權歸作者和部落格園共有,歡迎轉載,轉載時保留原作者和文章地址即可。