Vue中Router路由使用history模式发布后访问404

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/u013224617/article/details/122721583

使用webpack打包发布，网页不能正常访问，先看下路由配置

export default new Router({
  mode: 'history',
  base: '/putian/',
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },
    {
      path: '/ClusterManage',
      name: 'ClusterManage',
      component: ClusterManage
    },
    {
      path: '/MonitorWarn',
      name: 'MonitorWarn',
      component: MonitorWarn
    }
  ]
})

其中mode为history模式后，vue访问将不需要"#"。去掉mode一行，采用默认路由访问路径时如下：

http://localhost:8000/putian#/ClusterManage

使用history模式后，访问路径如下：

http://localhost:8000/putian/ClusterManage

开发环境可以正常访问，打包使用部署直接404，我这边使用的nginx，来部署，首先需要更改webpack的发布路径，我这边是在config/index.js，如下：

build: {
    // Template for index.html
    index: path.resolve(__dirname, '../dist/index.html'),

    // Paths
    assetsRoot: path.resolve(__dirname, '../dist'),
    assetsSubDirectory: 'static',
    /**
     * 发布路径
     */
    assetsPublicPath: '/putian/',

    /**
     * Source Maps
     */

    productionSourceMap: true,
    // https://webpack.js.org/configuration/devtool/#production
    devtool: '#source-map',

    // Gzip off by default as many popular static hosts such as
    // Surge or Netlify already gzip all static assets for you.
    // Before setting to `true`, make sure to:
    // npm install --save-dev compression-webpack-plugin
    productionGzip: false,
    productionGzipExtensions: ['js', 'css'],

    // Run the build command with an extra argument to
    // View the bundle analyzer report after build finishes:
    // `npm run build --report`
    // Set to `true` or `false` to always turn it on or off
    bundleAnalyzerReport: process.env.npm_config_report
  }

注意：index.js中assetsPublicPath: '/putian/',这个参数和Router路由中 base: '/putian/',保持一致。

有的同学可能环境架构跟我的不一致可以通过更改，webpack.cong.js代码如下：

module.exports = {
  context: path.resolve(__dirname, '../'),
  entry: {
    app: './src/main.js'
  },
  output: {
    path: config.build.assetsRoot,
    filename: '[name].js',
    publicPath: process.env.NODE_ENV === 'production'
      ? config.build.assetsPublicPath
      : config.dev.assetsPublicPath
  },
  resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src'),
    }
  },

其中output中publicPath参数更改这个就可以了。

到此还没完，访问还是有问题，访问时找不到ClusterManage相关文件

http://localhost:8000/putian/ClusterManage

会出现404错误，该如何处理，这是需要配置nginx，利用try_files特性，对404重新定位，配置如下

location /putian {
			alias C:\Users\lhq\IDEAProject\accurate-portrait-vue\dist;
			#root   html;
            index  index.html index.htm;
			try_files $uri $uri/ /putian/index.html;
}

访问上面地址，这里的$uri就是putian/ClusterManage，通过转换地址为去访问

http://localhost:8000/putian/index.html