Vue-cli3多页面应用无法路由至其他页面问题咨询

首先看你的vue.config.js配置，发现了一个关键错误——user页面的chunks配置写错了：

module.exports = {
    pages: {
        index: {
            entry: 'src/visitor/main.js',
            template: 'public/index.html',
            filename: 'index.html',
            title: 'Home Page',
            chunks: ['chunk-vendors', 'chunk-common', 'index']
        },
        user: {
            entry: 'src/user/main.js',
            template: 'public/index.html',
            filename: 'user.html',
            title: 'User Page',
            // 这里原来写的是'index'，必须改成'user'！
            chunks: ['chunk-vendors', 'chunk-common', 'user']
        }
    }
}

user页面的chunks数组里误写了index，这会导致它加载首页的chunk资源，而非自身的user chunk，这是页面无法正常加载的核心原因。

开发环境下的正确访问路径 #

修正配置后重启开发服务器，你可以通过以下URL直接访问user页面：
http://localhost:8080/user.html
Vue CLI的dev server会自动将pages中配置的filename映射为可访问的路由，这个路径无需额外配置即可生效。

页面间跳转的正确方式 #

你尝试的相对路径跳转方式容易出错，推荐两种更稳妥的方案：

1. 使用绝对路径通过JS跳转：

// 在首页中跳转到用户页面
location.assign('/user.html')

2. 直接用HTML的a标签跳转：

<a href="/user.html">前往用户页面</a>

绝对路径不受当前页面路径影响，能稳定指向目标静态HTML文件。

额外验证步骤 #

1. 确认src/user/main.js的Vue实例挂载正确，比如：

import Vue from 'vue'
import App from './App.vue'

new Vue({
  render: h => h(App)
}).$mount('#app')

同时确保public/index.html中有对应的<div id="app"></div>挂载点。

2. 执行npm run build构建项目，检查dist目录下是否生成了index.html、user.html以及对应的user.js、user.css资源。如果构建产物正常，说明配置已生效，开发环境的访问问题也会随之解决。

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