menu
refresh
shufu
这是一个前端开发记录Debug过程和杂谈的博客
Vue3 + VueRouter4 同域名不同路径部署多项目
access_time
brush 236个字
whatshot 41 ℃

因项目需要,pc、h5是分开开发的,最终部署的时候也会分开xx.com为pc xx.com/m为m端,
因为一开始对nginx不是很熟悉,因此跳转的方式是让运维人员直接重定向编写,上线时出现很多问题,

特此琢磨了一下正确的部署方式。

部署到根目录的项目可以正常配置即可,(注意,pc端的路由不要和m端重复,如果重复会导致很多问题发生,例如m端(第二项目)的路径是/m/时,在pc的业务路由中就不建议出现path: '/m/**')。

server {
        listen        80;
        server_name  myccmdefi.com;
        #root   "C:/phpstudy_pro/WWW/x.com";
        location / {
            root "C:/phpstudy_pro/WWW/x.com/";
            index index.html;
            try_files $uri $uri/ /index.html;
        }
        location /m/ {
            alias "C:/phpstudy_pro/WWW/x.com/dist/";
            try_files $uri $uri/ /dist/index.html;
            index index.html;
        }
}

nginx的配置表如上,

注意下router的配置, 需要改一些配置项目:

//router.js
const router = createRouter({
  history: createWebHistory('/m'),
  routes
})
//增加路由base路径

// vue.config.js
module.exports = {
...
    publicPath: "/m/",
...
}

// index.html 
<meta base="/m" />
// 以上3个地方均要配置, 而且需要和运维人员商讨好  最终不可变,

按以上方式配置好后,项目文件夹可分开存放,也可放在一起,一切准备好后即可发布项目

#如无特别声明,该文章均为 shufu 原创,转载请遵循 署名-非商业性使用 4.0 国际(CC BY-NC 4.0) 协议,即转载请注明文章来源。
#最后编辑时间为: 2020 年 09 月 29 日


account_circle
email
explore


DreamCat

主题名称:DreamCat | 版本:X1.6-20201226

主题开发:HanFengA7 | TeddyNight | Dev-Leo | CornWorld

鸣谢:学神之女

鸣谢:学神之女