背景:实现的效果就是ip或者域名后面输入不同的目录,进入不同的项目
复制代码
nginx配置
nginx配置也很简单,网上也有很多,这里直接上代码了
server {
listen 80
root /var/www/html;
index index.html index.htm index.nginx-debian.html;
server_name 120.125.125.12;//你的ip或者域名,这是我乱打的
//aaa项目
location /aaa {
try_files $uri $uri/ /aaa/index.html;
}
//bbb项目
location /bbb {
try_files $uri $uri/ /bbb/index.html;
}
复制代码
vue项目配置(这是aaa项目修改样例,bbb项目做同样的修改)
vue也要做一定的修改
- config下的index.js
//index.js 修改build里的assetsPublicPath字段
build: {
// Template for index.html
index: path.resolve(__dirname, '../dist/index.html'),
// Paths
assetsRoot: path.resolve(__dirname, '../dist'),
assetsSubDirectory: 'static',
//vue项目要修改这里,加上项目所在子目录的名称
assetsPublicPath: '/aaa/',
productionSourceMap: false,
devtool: '#source-map',
productionGzip:true,
productionGzipExtensions: ['js', 'css'],
bundleAnalyzerReport: process.env.npm_config_report
}
复制代码
- 修改路由文件中的base
export default new Router({
base:'/aaa/',//base修改为项目所在子目录的名称
routes: [
{
path: '/',
redirect: '/login'
},
...
...
...
]
...
...
...
}
复制代码
重启nginxh后就可以了
输入http://ip:aaa 访问aaa项目
输入http://ip:bbb 访问aaa项目复制代码