背景:实现的效果就是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项目复制代码