nginx同域名下部署多个vue项目
一.需求想要在同一个域名下部署多个前端项目,通过不同url来区分调用相应前端项目。比如:部署项目a,项目b。想要效果如下。浏览器输入:http://localhost:8082/a/,展示项目a。浏览器输入:http://localhost:8082/b/,展示项目b。二. 本地下载nginx服务器http://nginx.org/en/download.html三. nginx常用...
·
一.需求
想要在同一个域名下部署多个前端项目,通过不同url来区分调用相应前端项目。
比如:部署项目a,项目b。想要效果如下。
浏览器输入:http://localhost:8082/a/,展示项目a。
浏览器输入:http://localhost:8082/b/,展示项目b。
二. 本地下载nginx服务器
http://nginx.org/en/download.html
三. nginx常用命令
- 进入nginx安装目录,打开终端
- 启动服务:start nginx
- 停止服务:nginx -s stop nginx -s quit
- 修改配置后重新加载生效:nginx -s reload
- 查看nginx版本:nginx -v
四. nginx目录介绍
一般我们部署的时候,会把vue项目发布到html文件夹中,并且修改conf文件夹下的nginx.conf文件。
五. vue打包配置
- 修改vue.config.js,没有这个文件在项目根目录新建一个。
- 修改全局router.js文件
六.nginx.conf配置
server {
listen 8082;
server_name localhost;
#charset koi8-r;
#access_log logs/host.access.log main;
location / {
root html;
index index.html index.htm;
try_files $uri $uri/ /index.html;
}
location /a/ {
alias html/app/;
index index.html index.htm;
try_files $uri $uri/ /app/index.html;
}
location /b/ {
alias html/pc/;
index index.html index.htm;
try_files $uri $uri/ /pc/index.html;
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root html;
}
}
6.1 可以单独写一个配置文件,在nginx.conf中引入。这样方便我们后期的维护
在conf目录下新建一个otherconf文件夹。并在此文件夹下新建一个a配置文件。
a文件
server {
listen 8083;
server_name localhost;
location / {
root html;
index index.html index.htm;
try_files $uri $uri/ /blog/index.html;
}
location /a/ {
alias html/app/;
index index.html index.htm;
try_files $uri $uri/ /app/index.html;
}
location /b/ {
alias html/pc/;
index index.html index.htm;
try_files $uri $uri/ /pc/index.html;
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root html;
}
}
在nginx.conf文件http模块中引入。
http {
include mime.types;
# 引入所有配置
include otherconf/*.conf;
default_type application/octet-stream;
sendfile on;
#tcp_nopush on;
keepalive_timeout 65;
#gzip on;
....
}
更多推荐
已为社区贡献22条内容
所有评论(0)