vue router使用history模式发布nginx的打包配置

【问题描述】

1.vue router使用history模式，开发环境下运行正常，打包并部署到nginx显示空白页面

2.vue router使用history模式，开发环境下运行正常，打包并部署到nginx显示404

3.vue router使用history模式，开发环境下运行正常，打包并部署到nginx正常访问，但是刷新后显示500

【问题分析】

1.显示空白页面说明静态资源文件没有找到，页面无法渲染出来。

2.报错404时，表示连index.html都没有被命中。

3.输入路径访问，页面显示正常，但是一旦刷新便显示500，说明nginx配置异常。

【信息搜集】

服务器配置：

HTML5模式服务器配置示例

脚手架配置：
VUE-CLI中publicpath配置

【问题解决】

由于nginx上部署了不止一个项目，本项目只能部署到子路径上。根据搜集到的资料修改项目中的配置：

1.修改router.js中路由配置。

const router = new VueRouter({
  mode: 'history',
  base: '/HackerAC/',
  scrollBehavior (to, from, savedPosition) {
    return { x: 0, y: 0 }
  },
  routes
})

2.修改vue.config.js配置。开发环境下项目只需要架设在根目录即可，只是在生产环境下才需要将项目架设在子路径“/HackerAC/”上，因此publicPath应该配置为条件式的。

module.exports = {
  publicPath: process.env.NODE_ENV === 'production' ? '/HackerAC/' : '/',
  outputDir: 'dist/HackerAC',
}

3.打包后：

4.将HackerAC文件夹及其下的文件放置到nginx的html目录下：

5.修改nginx配置文件：

http {
    include       mime.types;
    default_type  application/octet-stream;
    sendfile        on;
    keepalive_timeout  65;
   
    server {
        listen       8085;
        server_name  localhost;
        
        location ^~ /HackerAC {
            index  /HackerAC/index.html;
            try_files $uri $uri/ /HackerAC/index.html;
        }
        
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
    }
}

6.启动nginx后,浏览器访问：http://localhost:8085/HackerAC/    即可。

【写在最后】

1.与其怀着白拿的心思全网查找各种博客，翻阅着大量彼此抄袭的文章，还不如静下心来看看官方文档。

2.良好的专业素质和崇高的职业素养是任何一个技术从业者最耀眼的精神品质。

3.触类旁通，学习和成长从照葫芦画瓢开始。