nginx配置多个vue项目
两种配置方式
如何在nginx配置多个vue项目?第一种是使用不同的端口,既配置多个server即可。第二种是同一个端口,既在一个server里面配置多个vue项目。
使用多个server配置多个vue项目(使用多个端口)
这个方式最简单,将第一份server配置拷贝一下,稍微调整一下就可以了,示例如下:
server {
listen 9001;
server_name localhost;
# 这个是第一个vue项目 页面访问地址 http://ip:9001/one
location /one {
root /home/project/dist/;
index index.html index.htm;
try_files $uri $uri/ /index.html; # 防止页面刷新404
}
... ...
}
server {
listen 9002;
server_name subhost;
# 这个是第二个vue项目 页面访问地址 http://ip:9002/two
location /two {
root /home/sub_project/dist/;
index index.html;
try_files $uri $uri/ /index.html; # 防止页面刷新404
}
... ...
}
在一个server配置多个项目(共用一个端口)
多个端口,只需要调整nginx配置,若使用同一个端口,则需要稍微调整一下vue打包配置。
- 调整子项目vue.config.js文件的publicPath属性值
... ...
module.exports = {
publicPath: '/sub', # 非主项目,这边要修改一下指定路径
outputDir: 'dist', # 这个不用调整
assetsDir: 'static',# 这个也不需要调整
... ...
}
- 调整子项目router配置的创建路由配置
... ...
const createRouter = () => new Router({
base: '/sub', # 调整这里,路径跟publicPath保持一致即可
mode: 'history', // require service support
scrollBehavior: () => ({ y: 0 }),
routes: routers
})
... ...
- 调整完毕后,直接执行build打包命令,可以发现index.html引入js路径增加了/sub
... ...
<script type="text/javascript" src="/sub/static/js/chunk-vendors.js"></script>
<script type="text/javascript" src="/sub/static/js/app.js"></script>
... ...
- 最后,调整nginx的server配置
server {
listen 9001;
server_name localhost;
# 这个是第一个vue项目 页面访问地址 http://ip:9001
location / {
root /home/project/dist/;
index index.html index.htm;
try_files $uri $uri/ /index.html;
}
# 这个是第二个vue项目 页面访问地址 http://ip:9001/sub
location /sub {
alias /home/sub_project/dist/;
index index.html;
try_files $uri $uri/ /index.html;
}
}