同域名多个vue项目

如何在一个域名下部署多个项目?
就只是域名后第一个路径不一样就一个vue项目。比如 https://www.sinye.xyz/index是一个vue项目https://www.sinye.xyz/admin是一另个vue项目。

同域名多个vue项目

前端配置(vue框架)

1、首先我们配置vue。找到根目录vue.config.js文件,在module.exports里面加入

publicPath: process.env.NODE_ENV ==== 'production' ? '/sj' : '/',

注意:/sj 这个是自己取的路径名
例如:

module.exports = {
    // 基本路径,如果是生产(也就是run build) 那么生成的 index.html 文件,引入的js,css路径前缀会是 /pc/
    publicPath: process.env.NODE_ENV ==== 'production' ? '/sj' : '/',
    // 用于存放静态资源(js、css、img、fonts)
    assetsDir: 'static',
    // 输出文件目录
    outputDir: 'dist_sj',
};

2、修改vue的router,找到路由文件,修改base属性,如下

const router = new VueRouter({
    mode: 'history',
    base: process.env.BASE_URL,
    routes
})

改完本地运行是看不到效果的,因为process.env.NODE_ENV != ‘production’。

服务器配置

改好后,vue项目就不需要动了,我们移步到服务器(我的是宝塔集成环境)
1、打开项目所在域名的伪静态,添加

location /sj {
      #alias /usr/local/server/war/pc/;
      index index.html index.htm;
      try_files $uri $uri/ /sj/index.html;
}

同域名多个vue项目插图

注意:自定义路径名和上传文件夹名要一样,否则路径找不到文件。
路径名和前端配置的名字一样!路径名和前端配置的名字一样!路径名和前端配置的名字一样!
 
2、加完后按照配置的上传文件就好了
同域名多个vue项目插图1

评论

  1. 小黑黑
    6月前
    2022-6-20 21:16:25

    牛逼

发送评论 编辑评论


				
上一篇
下一篇