vue在history模式下如何配置相关文件和后端ngnix配置

vue history模式 部署在服务器端的nginx配置 (非根目录)

vue history需要nginx或者其他方式配置一下才可正确访问，否则路由跳转之后刷新一下便会出现404

最近遇到的问题是上了一个小的项目，需要放在更深层次的目录下，上到测试环境 做了官网提到的nginx配置发现不行，之后查阅了一些博客资料，发现都没有一个特别好的方案。最终，我的解决方案如下

nginx配置如下

server {

        listen      443 ;

        server_name  m;

       

        root  html/mobile;

        location / {

            index  index.html index.htm;

            try_files $uri $uri/ /auth/index.html;

        }

    }

vue router 配置

// 路由配置

const RouterConfig = {

  base: "/auth/",

  mode: 'history',

  routes: routers

};

该项目是用的vue-cli2 所以只需要修改config 里面的index.js的build部分

webpack 配置修改

build: {

    // Template for index.html

    index: path.resolve(__dirname, '../dist/auth/index.html'),

    // Paths

    assetsRoot: path.resolve(__dirname, '../dist'),

    assetsSubDirectory: 'auth/static',

    assetsPublicPath: '/',

    /**

    * Source Maps

    */

    productionSourceMap: false,

    devtool: '#source-map',

    productionGzip: false,

    productionGzipExtensions: ['js', 'css'],

    bundleAnalyzerReport: process.env.npm_config_report

  }

最终项目地址为 m.xxx.com/auth/