前端地址栏添加路径标识
→ Vue.config.js配置
module.exports = {
// 关键修改1：publicPath改为/test/，与Nginx的/location /test路径对齐
publicPath: '/test/',
outputDir: 'vue-code', // 构建输出目录（保持不变）
assetsDir: 'static',
indexPath: 'index.html', // 指定生成的 index.html 的输出路径（保持不变）
lintOnSave: debug && 'error', // 是否开启eslint保存检测（保持不变）
runtimeCompiler: false, // 是否使用包含运行时编译器的 Vue 构建版本（保持不变）
transpileDependencies: [], // 默认babel-loader忽略mode_modules（保持不变）
productionSourceMap: false, // 是否生成sourceMap文件（保持不变）
integrity: true,
}
1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
→ nginx.conf配置
server {
listen 8881;
location /test {
alias "D:/nginx/home/test";
index index.html index.htm;
try_files $uri $uri/ /index.html;
add_header Cache-Control no-cache;
}
# 后端代理配置（不变）
location ^~/api {
proxy_set_header Host $host;
proxy_set_header X-Real-YP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-NginX-Proxy true;
proxy_read_timeout 6000;
fastcgi_read_timeout 6000;
proxy_pass http://192.168.0.1:8081/;
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
设置成功后 浏览器地址就可以访问
http://192.168.0.1:8888/test/#/login
1
编辑 (opens new window)
上次更新: 2025-10-15 14:02:30