vue项目部署 nginx 二级目录刷新404 资源找不到白屏 (history模式)

最新推荐文章于 2024-07-25 15:48:40 发布

年年CODE

最新推荐文章于 2024-07-25 15:48:40 发布

阅读量2.7k

点赞数 3

分类专栏： vue项目打包部署文章标签： vue.js nginx javascript

本文链接：https://blog.csdn.net/qq_38743783/article/details/125676984

版权

vue项目打包部署专栏收录该内容

1 篇文章 0 订阅

订阅专栏

本文详细介绍了Vue.js项目中vue.config.js、router.js和.env配置文件的设置，以及如何在Nginx服务器上进行二级目录部署。通过设置publicPath和base实现路由适配，并提供不同环境的配置示例。最后，给出了Nginx服务器的location配置，确保正确重定向和处理静态资源。

摘要由CSDN通过智能技术生成

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;
        }
}