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

vue history需要nginx或者其他方式配置一下才可正確訪問，否則路由跳轉之後刷新一下便會404 具體原因vue-router官網有說明，在此不多說

最近遇到的問題是上了一個小的項目，需要放在更深層次的目錄下，上到測試環境 做了官網提到的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/