托管VueJS项目时出现路由器链接问题

Question

我有一个带有路由器链接的VueJS网站项目。在本地，一切都如预期的那样工作，但是当我为托管路由链接而构建它时，它就不再工作了。(我尝试了两个不同的托管平台，所以问题肯定在我的配置中。(

我已经读过一些类似的问题，都提出了历史模式。我已经在用了，但它不起作用。

我的路由器index.js文件：

Vue.use(Router)
export default new Router({
linkActiveClass: 'active',
routes: configRoutes(),
mode: 'history',
})
function configRoutes() {
return [
{
path: '/',
name: 'Home',
component: Home,
},
{
path: '/about',
name: 'About',
component: About,
},
{
path: '/contact',
name: 'Contact',
component: Contact,
},
]
}

和我的配置index.js构建：

build: {
// Template for index.html
index: path.resolve(__dirname, '../dist/index.html'),
// Paths
assetsRoot: path.resolve(__dirname, '../dist'),
assetsSubDirectory: 'static',
assetsPublicPath: '/',
/**
* 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
}

Answer 1

问题出在路由器中的mode: 'history'

根据vue路由器文档：

Vue路由器的默认模式是哈希模式-它使用URL哈希来模拟完整的URL，这样当URL更改时就不会重新加载页面。

为了消除散列，我们可以使用路由器的历史模式

这里出现了一个问题，由于Vue是SPA，如果没有正确的服务器配置，用户如果访问任何路由"，将得到404错误；除了根目录"之外；

解决方案

要解决这个问题：您有两个解决方案：

1. 在每次回退后使主机重定向到index.html(请阅读路由器文档中的服务器配置示例(
2. 从路由器配置中删除mode: 'history'，这将在基本URL后添加哈希。所以所有的路线都会被找到