Nginx——一个域名下部署多个Vue项目

发布于

前言

当前生成环境已经有一个正常的Vue项目，现在需要将大屏项目也部署到同一个域名下，搜索了下类型的问题，感觉问的还挺多的，所以这里记录下操作步骤；

如何在不动第一个项目的情况下来部署第二个Vue项目；

内容

前端配置

publicPath

修改vue.config.js下的publicPath参数

代码语言：js
复制
 publicPath: process.env.NODE_ENV === 'production' ? '/screen/' : '/',

完整配置如下：

代码语言：js
复制
const { defineConfig } = require('@vue/cli-service');
const path = require('path');
const resolve = (dir) => {
    return path.join(__dirname, dir);
};
module.exports = defineConfig({
    transpileDependencies: true,
    publicPath: process.env.NODE_ENV === 'production' ? '/screen/' : '/',
    filenameHashing: true,
    productionSourceMap: false,
    chainWebpack: (config) => {
        config.resolve.alias.set('@', resolve('src'));
        config.plugin('html').tap((args) => {
            args[0].title = 'xxx营销一体化数字管理平台';
            return args;
        });
    },
});

router

修改路由，配置如下：

代码语言：js
复制
import Vue from 'vue';
import VueRouter from 'vue-router';

Vue.use(VueRouter);


const routes = [

{

path: '/',

name: 'index',

component: () => import('@/views/index.vue'),

},

];

const router = new VueRouter({

mode: 'history',

base: 'screen', // 基础路径进行调整

routes,

});


export default router;

服务器配置

创建目录

进入到第一个项目的目录下，创建子级目录，并将制品dist放入到该目录下；
不想放到第一项目目录下，新建一个目录也可以，不过记得对应的nginx配置也需要调整；

代码语言：shell
复制
$ cd <第一个项目目录下>

$ mkdir screen

Nginx

在第一个项目对应的配置文件中，增加对应的配置：

代码语言：js
复制
 location ^~ /screen {

alias  /www/wwwroot/tiktok-web/screen/dist;

try_files uri uri/ /screen/index.html;

}

检测无误后，重新载入nginx配置文件：

代码语言：shell
复制
$ nginx -t

$ nginx -s reload

测试验证

访问对应的地址（http://<域名>/screen/）进行测试：

总结

  1. 前端publicPath和router进行调整
  2. 服务端nginx进行配置
  3. 进行访问验证

我丢，忘记对关键数据看板哪里进行了缺省的配置，现在要去修复这个问题了~

#nginx#vuejs2