宝塔上多个history模式vue项目的nginx配置
要求:在同一个域名下nginx配置多个*(history模式)vue项目
例如:域名为 https://ceshi.com
配置两个项目访问路径:1.https://ceshi.com/main 2.https://ceshi.com/activity
vue项目中配置:
- 修改路由配置
const createRouter = () => new Router({
mode: 'history',
// 注意要和要求的子域名一致
base: '/one',
routes
})
- 修改publicPath(vue.config.js)
module.exports = {
// 注意要和要求的子域名一致
publicPath: '/one/'
}
nginx中配置:
- 主域名配置
listen 80;
server_name a.yuming.cn;
root /test/myFileDir/;
- 子配置
# 注意要和项目中配置的base一样 [域名+/one]
location /one{
alias /test/myFileDir/one;
#vue中配置的 base+/index.html
try_files $uri $uri/ /one/index.html;
# index index.html; #这一行默认要不要都可以,看你自己的文件名决定
}
#第二个项目访问路径 [域名+/two]
location /two {
alias /test/myFileDir/two;
try_files $uri $uri/ /two/index.html;
}
#第三个.... [域名+/three]
location /three{
alias /test/myFileDir/three;
try_files $uri $uri/ /three/index.html;
}
服务器中文件目录:
对应nginx中配置的alias
项:/test/myFileDir/one
、/test/myFileDir/two
…
以此类推 可以添加任意多个vue history路由模式项目