vue项目部署 nginx 二级目录刷新404 资源找不到白屏 (history模式)
vue
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
项目地址:https://gitcode.com/gh_mirrors/vu/vue
免费下载资源
·
vue.config.js
publicPath: `/${process.env.VUE_APP_DIR}/`
router.js
const router = new VueRouter({
mode: 'history', //如果是hash模式就不需要nginx重写
base: `/${process.env.VUE_APP_DIR}/`,
routes,
});
.env.production
NODE_ENV = 'production'
VUE_APP_DIR = '二级目录名称'
VUE_APP_BASE_URL = 'http://*****.com'
.env.development
NODE_ENV = 'development'
VUE_APP_DIR = '二级目录名称'
VUE_APP_BASE_URL = 'http://*******.com'
package.json 这一步可以忽略 根据个人习惯 自定义打包命令
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint",
"打包测试版": "vue-cli-service build --mode development",
"打包生产版": "vue-cli-service build --mode production",
"deploy-aliyun-test": "g-deploy deploy --env aliyunTest"
},
最后一部重要 修改nginx配置
server {
listen 80;
server_name test.*****.com;
location /二级目录名称 { //1
alias /opt/static_projects/test/二级目录名称; //2
try_files $uri $uri/ /二级目录的名称/index.html; //3
}
location / { //根目录
root /opt/static_projects/test/;
try_files $uri $uri/ @router;
index index.html;
}
location @router{
rewrite ^.*$ /index.html last;
}
}
GitHub 加速计划 / vu / vue
207.54 K
33.66 K
下载
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
最近提交(Master分支:2 个月前 )
73486cb5
* chore: fix link broken
Signed-off-by: snoppy <michaleli@foxmail.com>
* Update packages/template-compiler/README.md [skip ci]
---------
Signed-off-by: snoppy <michaleli@foxmail.com>
Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 4 个月前
e428d891
Updated Browser Compatibility reference. The previous currently returns HTTP 404. 5 个月前
更多推荐
已为社区贡献3条内容
所有评论(0)