September 29, 2023
By: 王朝阳
前端项目配置域名二级目录访问（vue2、vue3、cljs）
一、背景需求
我们开发中会遇到这样的需求，让我们用服务器nginx部署一个用域名的二级目录来访问项目、下面将讲述使用vue2+webpack 和 vue3+vite及cljs 配置二级目录访问（cljs配置比较麻烦，耐心看）
https://xxx/二级目录/来放访问项目
二、实现思路
步骤1：将spa项目的路由改成history模式访问
步骤2：将项目中的访问路由和静态资源文件，都加上要配置的二级目录名称名称
步骤3：配置nginx的二级目录访问项目就ok了
三、实现步骤1（配置项目history二级目录访问路由及资源）
3.1 vue2+webpack的配置
（1）vue.config.js配置
module.exports = {
publicPath: "/wang/"
}
（2）router配置
const router = new VueRouter({
mode: "history",
base: process.env.BASE_URL, // 这个就是上面的publicPath
routes,
});
3.2vue3+vite的配置
（1）vite.config.js配置
export default defineConfig({
base: "/wang/"
})
（2）router配置
const router = createRouter({
// 指定路由的模式,此处使用的是history模式
history: createWebHistory("/wang/"),
// 路由地址
routes
});
3.3cljs项目的配置
（1）配置项目使用history路由模式
（2）配置项目二级路由访问
（3）修改项目跳转采用二级路由
备注
项目里采用了两种路由跳转方式，一种是:navigate-to 这中就不用管、一种是href跳转链接方式（这个必须改）
实现步骤1
全局搜索a标签的属性的href来手动增加二级目录**（注意别把link的href修改了！！！！）**
实现步骤2（看情况斟酌是否需要修改）
因为项目里面路由表的信息，还存有一部分在数据库，所以也需要修改，手动增加二级目录
（3）配置项目二级目录资源
实现步骤1
修改项目index.html页面的资源引用（采用相对路径引用，去除src及href链接开头的"/"字符）
实现步骤2
全局搜索:href 全局修改link标签的href路径（去掉链接前的"/"）
实现步骤3
全局搜索:src （修改img标签的src静态资源引用路径）
四、实现步骤2
当然是打包了铁铁
五、配置nginx的server conf中的匹配规则（所有前端spa项目都是这个步骤）
server {
listen 8083; #1.监听访问端口
server_name 106.13.0.11; #2.当前服务器ip或者域名或者localhost
# 这里要写成末尾不带"/"的形式，如果写成"/wang/"单单访问106.13.0.11:8083/wang会404
location /wang {
alias /usr/web/qfqz/dist/; # 这里配置alias（配置root的话，必须了解访问规则），用来指定项目目录位置
index index.html index.htm;
try_files $uri $uri/ /wang/index.html; # 这里在/index.html的基础上，前面需要加上/wang（否则刷新404）
gzip_static on;
}
}