1.多个端口形式 ,nginx 默认代理80 端口 ,我们可以把其他项目部署到其他端口
修改 nginx.conf 我的在 usr/local/nginx/conf/nginx.conf 修改 vim nginx.conf
在http 模块内加上一行命令 include /etc/nginx/conf.d/*.conf; 可以自定义路径保持一致就行,这个就像子组件一样 ,当nginx执行 nginx.conf 时 ,会加载 include /etc/nginx/conf.d 文件下的 所有 conf 配置文件,我们在 这些文件可以写 nginx.conf 相同的内容。 nginx.conf 默认代理的是 80 端口,我们可以 在 子文件 conf 中代理其他的端口
nginx.conf
#user nobody;
worker_processes 1;
#error_log logs/error.log;
#error_log logs/error.log notice;
#error_log logs/error.log info;
#pid logs/nginx.pid;
events {
worker_connections 1024;
}
http {
include mime.types;
default_type application/octet-stream;
include /etc/nginx/conf.d/*.conf;
sendfile on;
keepalive_timeout 65;
server {
listen 80;
server_name localhost;
gzip on;
gzip_min_length 1k;
gzip_comp_level 9;
gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;
gzip_vary on;
gzip_disable "MSIE [1-6]\.";
location / {
root html/dist;
index index.html index.htm;
}
location /cn {
alias html/en;
index index.html index.htm;
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root html;
}
}
}
/etc/nginx/conf.d/cn.conf
server {
listen 81;
server_name localhost;
location / {
root html/cn;
index index.html index.htm;
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root /usr/share/nginx/html;
}
}
效果
第一个使用 默认 80 端口 , 第二个使用路由 ,第三个使用 81端口
我的所有项目 都在 usr/local/nginx/html 中 ,当你使用 路由形式 要 修改 项目打包 时的配置
在
vue.config.json 配置项 加上 publicPath 和 vue-router 添加 base配置项
module.exports = defineConfig({
publicPath:'/cn/',
transpileDependencies: true,
lintOnSave: false,
....
})
let router = new VueRouter({
routes,
base:'/cn/'
});
添加的名称 就是需要 在地址栏访问的 字段
root和 alias的区别
请求 /a
root html/b 指向 html/b/a
alias html/b 指向 html/b