Vue中如何自定义vue.config.js配置页面的访问路由？

有两种常用实现方案，推荐优先使用第一种，无需额外配置服务器规则：

方案1：修改pages配置的filename属性 #

直接调整otherpage页面对应的filename配置项，让打包后生成other/index.html结构，静态服务器会默认自动匹配目录下的index.html文件，直接通过domain/other即可访问：

module.exports = {
  pages: {
    index: {
      entry: 'src/main.js',
      template: 'public/index.html',
      filename: 'index.html'
    },
    otherpage: {
      entry: 'src/other.js',
      template: 'public/otherpage.html',
      // 仅修改这一行即可
      filename: 'other/index.html'
    }
  }
}

方案2：保留原有pages配置，额外配置路由重写 #

如果不想修改打包产物的目录结构，可以通过重写规则把/other路径映射到/otherpage.html：

开发环境配置 #

在vue.config.js中追加devServer配置：

module.exports = {
  // 原有pages配置保持不变
  pages: { /* 你的原有pages配置 */ },
  devServer: {
    historyApiFallback: {
      rewrites: [
        { from: /^\/other$/, to: '/otherpage.html' }
      ]
    }
  }
}

生产环境配置 #

根据你使用的服务器配置重定向规则，以Nginx为例，新增如下配置即可：

location /other {
  try_files $uri $uri/ /otherpage.html;
}

内容的提问来源于stack exchange，提问作者TheCat