公司要求一个URL下连接两个项目,查阅了半天了解到nginx,研究了研究终于搞定了,记录一下过程,方便以后温习。
线上nginx搭建是后台写的,开发环境是前端(也就是我)写的,所以文章是以前端角度描述的。
首先主域名是www.url.com,要绑定的子域名是www.url.com/two(two是第二个项目的名字)
第一个项目默认为根url,'/' 就自动选择第一个项目,第二个项目为 '/two' , url输入www.url.com/自动选择第一个项目,url输入www.url.com/two自动选择第二个项目。
先下载nginx,找到nginx.conf文件,修改配置
server {
listen 8080;
server_name localhost;
#charset koi8-r;
#access_log logs/host.access.log main;
location / {
root 第一个项目的本地路径;
index index.html index.htm; //默认选择的页面
try_files $uri $uri/ /index.html;//刷新跳转的页面,防止404
}
location /two{
alias 第二个项目的本地路径;
index index.html index.htm;
try_files $uri $uri/ /supplier/index.html;
}
}
然后配置项目,第一个项目不用写
在第二个项目vue.config.js
module.exports = {
// publicPath: process.env.NODE_ENV === 'two'? '/two/': '/',这个是是生产者环境的值
publicPath: '/two/',//因为既然已经决定把它当子路径用了就直接设置,不判断了。
}
在第二个项目vue-router里的index.js
const router = new VueRouter({
mode: 'history',
//加上base,把应用的基础路径改为/two/
base: '/two/',
routes
})
这样nginx和项目就配置完了,然后打包dist文件,启动nginx,就可以了
有个缺点是每次更新完代码都要重新打包一次nginx才可以同步到页面上,因为就开发一个小功能,就没写这块,望各位大佬优化一下。