可能因为太菜了,这个地方卡了挺久的,现在记录一下
Vue-Cli 4.15.13
、vue-router 3
、nginx 1.20.2
(1)更改router模式,添加前缀
export default new Router({
mode: 'history', // history模式,不带#,由服务器负责转发
// mode: 'hash',
base: '/kyxm', // 前缀名
routes: [...]
})
(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
},
}
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;
}
}
依然存在的问题
刷新会返回首页,没有解决,难受,有没有大佬教一下
没想到我这帖子还能被搬,听我说谢谢你