Vue history模式添加前缀 Nginx配置
可能因为太菜了,这个地方卡了挺久的,现在记录一下
环境
Vue-Cli 4.15.13、vue-router 3、nginx 1.20.2
具体步骤
1、Vue 中配置
(1)更改router模式,添加前缀
(2)更改vue配置和打包路径 config/index.js,拿来就用系列
module.exports = {
publicPath: /kyxm, // 前缀名
dev: {
// Paths
assetsSubDirectory: static,
assetsPublicPath: /,
// 配置代理,但是打包后代理会失效
proxyTable: {
/api: {
target: XXX,
ws: true,
changOrigin: true,
pathRewrite: {
^/api:
},
},
/dev-api: {
target: YYY,
ws: true,
changOrigin: true,
pathRewrite: {
^/dev-api:
},
secure: true,
// logLevel: debug,
}
},
// Various Dev Server settings
host: 0.0.0.0, // can be overwritten by process.env.HOST
port: 41892, // 配置端口
autoOpenBrowser: false,
errorOverlay: true,
notifyOnErrors: true,
poll: false,
/**
* Source Maps
*/
devtool: cheap-module-eval-source-map,
cacheBusting: true,
cssSourceMap: true
},
build: {
// Template for index.html
index: path.resolve(__dirname, ../dist/index.html),
// Paths
assetsRoot: path.resolve(__dirname, ../dist/),
assetsSubDirectory: kyxm, // 这里的打包路径改成前缀名
assetsPublicPath: ./,
/**
* Source Maps
*/
productionSourceMap: true,
devtool: #source-map,
productionGzip: false,
productionGzipExtensions: [js, css],
bundleAnalyzerReport: process.env.npm_config_report
},
}
2、Nginx配置
server {
listen 41892;
server_name localhost;
# 静态文件位置
location / {
root html/kyxm;
rewrite / /kyxm ; # 重写路由
}
location @router {
rewrite ^.*$ /index.html last;
}
location /kyxm {
try_files $uri $uri/ @router;
index index.html index.htm;
}
# 配置代理
location /kyxm/api/ {
proxy_pass XXX;
}
location /kyxm/dev-api/ {
proxy_pass YYY;
}
location /login {
rewrite /login XXYY;
}
}
后续
依然存在的问题
刷新会返回首页,没有解决,难受,有没有大佬教一下
没想到我这帖子还能被搬,听我说谢谢你
