前言
当前生成环境已经有一个正常的Vue项目,现在需要将大屏项目也部署到同一个域名下,搜索了下类型的问题,感觉问的还挺多的,所以这里记录下操作步骤;
如何在不动第一个项目的情况下来部署第二个Vue项目;
内容
前端配置
publicPath
修改vue.config.js
下的publicPath
参数
publicPath: process.env.NODE_ENV === 'production' ? '/screen/' : '/',
完整配置如下:
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
修改路由,配置如下:
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配置也需要调整;
$ cd <第一个项目目录下>
$ mkdir screen
Nginx
在第一个项目对应的配置文件中,增加对应的配置:
location ^~ /screen {
alias /www/wwwroot/tiktok-web/screen/dist;
try_files $uri $uri/ /screen/index.html;
}
检测无误后,重新载入nginx配置文件:
$ nginx -t
$ nginx -s reload
测试验证
访问对应的地址(http://<域名>/screen/
)进行测试:
总结
- 前端
publicPath
和router
进行调整 - 服务端
nginx
进行配置 - 进行访问验证
我丢,忘记对关键数据看板哪里进行了缺省的配置,现在要去修复这个问题了
标签:Vue,const,nginx,screen,Nginx,域名,vue,publicPath From: https://www.cnblogs.com/wangyang0210/p/18293739