1. nginx的server配置。
server {
listen 9999;
server_name localhost;
# 客户端支持上传的最大文件大小
client_max_body_size 200m;
# 根目录部署
# 访问url为http://公网ip(或域名)/
location / {
# 文件所在的文件夹
root F:/RUIZY/WEB/;
# 主页文件名
index index.html index.htm;
}
# 部署在/admin/目录下,
# 访问url为http://公网ip(或域名)/admin/
location /admin/ {
alias F:/RUIZY/MANAGER/;
index index.html index.htm;
}
# 后端api代理
location /api/ {
#root html;
#index index.html index.htm;
proxy_pass http://127.0.0.1:18099/api/;
}
}
2. vue开发打包配置
- vue3.0后项目初始没有vue.config.js,那就在项目根目录新建一个vue.config.js,并加入如下配置:
module.exports = {
// 选项...
// 根据开发和打包环境不同的根路径
// publicPath: process.env.NODE_ENV === 'production'
// ? '/admin/'
// : './',
// 设置打包后的访问根路径(与服务nginx一致): http://ip:port/admin/
publicPath:'/admin/',
// 打包输出文件夹
outputDir: 'readyProduct',
// assets文件所在的父目录
assetsDir: './',
// assetsPublicPath: './'
}
- 使用vue-router创建router时加入参数:
const mainRouter = new VueRouter({
routes,
mode: 'history',
// 加入这个基路径。否则虽然部署成功,访问页面为空白,也不提示错误
base: '/admin/'
})