主要内容
一、环境二、问题描述三、问题解决1、修改vue项目中的vue.config.js文件2、修改Nginx的nginx.conf配置文件3、Nginx目录结构一、环境
系统: 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，可以有多个aliasindex index.html index.htm;#下面这一句是重点，意思就是将地址都导向index.htmltry_files $uri $uri/ /index.html;}location /a {# a项目alias html/a;index index.html index.htm;#下面这一句是重点，意思就是将地址都导向index.htmltry_files $uri $uri/ /a/index.html;}location /b {# b项目alias html/b;index index.html index.htm;#下面这一句是重点，意思就是将地址都导向index.htmltry_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;#}}
3、Nginx目录结构
好了，这样配置好后就可以解决以上所有的问题了。
