一、环境
系统: windows
nginx: 1.20.2
nodejs: v10.24.0
npm: v6.14.11
@vue/cli: 4.5.13
二、问题描述
新建Vue项目的时候,如果选择hash模式的话,地址上都会带一个#号,本人嫌太丑,选择了history模式,到了部署项目的时候,刚好又需要多个项目部署在一起。部署完发现:① js、css文件找不到、② 页面报404、③ 页面报500。
三、问题解决
1、修改vue项目中的vue.config.js文件
a项目增加以下内容:
module.exports = {
... // 其他内容省略
publicPath: process.env.NODE_ENV === 'production' ? '/a' : '/', // production 正式环境,development 开发环境
};
b项目增加以下内容:
module.exports = {
... // 其他内容省略
publicPath: process.env.NODE_ENV === 'production' ? '/b' : '/', // production 正式环境,development 开发环境
};
2、修改Nginx的nginx.conf配置文件
server {
listen 12345;
server_name localhost;
#charset koi8-r;
#access_log logs/host.access.log main;
location / {
root html; # 只能有一个root,可以有多个alias
index index.html index.htm;
#下面这一句是重点,意思就是将地址都导向index.html
try_files $uri $uri/ /index.html;
}
location /a { # a项目
alias html/a;
index index.html index.htm;
#下面这一句是重点,意思就是将地址都导向index.html
try_files $uri $uri/ /a/index.html;
}
location /b { # b项目
alias html/b;
index index.html index.htm;
#下面这一句是重点,意思就是将地址都导向index.html
try_files $uri $uri/ /b/index.html;
}
#error_page 404 /404.html;
# redirect server error pages to the static page /50x.html
#
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root html;
}
# proxy the PHP scripts to Apache listening on 127.0.0.1:80
#
#location ~ \.php$ {
# proxy_pass http://127.0.0.1;
#}
# pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
#
#location ~ \.php$ {
# root html;
# fastcgi_pass 127.0.0.1:9000;
# fastcgi_index index.php;
# fastcgi_param SCRIPT_FILENAME /scripts$fastcgi_script_name;
# include fastcgi_params;
#}
# deny access to .htaccess files, if Apache's document root
# concurs with nginx's one
#
#location ~ /\.ht {
# deny all;
#}
}
好了,这样配置好后就可以解决以上所有的问题了。
- 文章链接: https://blog.zhangcun.store/2022/06/17/nginx-xia-tong-yu-bu-shu-duo-ge-vue-xiang-mu-history-lu-you-mo-shi-bao-404-500-cuo-wu/
- 版权声明: 本网站所有文章除特别声明外,均采用 CC BY-NC-ND 4.0 许可协议。转载请注明出处!
你的赏识是我前进的动力
支付宝
微信