Question

我已按照本指南https://cli.vuejs.org/config/#pages将vue-cli3配置为构建多页应用程序，我的应用程序具有2个静态页面，并且能够如下所示设置vue.config.js。当我运行该应用程序时，它会按预期加载索引页面，但是我无法导航到其他页面。

索引页面位于下面的基本网址上 http://localhost:8080/

我尝试了以下网址，但它们未加载第二页 http://localhost:8080/user.html http://localhost:8080/user http://localhost:8080/user/user.html

文档指出生成的文件“输出为dist / user.html”，但尚不清楚如何以编程方式或直接从url链接到文件。

我也克隆了这个Vue-cli入门项目https://github.com/Plortinus/vue-multiple-pages，并注意到作者通过调用一个调用location.assign('../customer/home.html')的方法来使页面在工作之间路由，但这对我不起作用，我我不确定为什么。

我的vue.config.js

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',

            chunks: ['chunk-vendors', 'chunk-common', 'index']
        }
    }
}

项目结构 https://ibb.co/kJ5SqDb

Answer 1

加载http://localhost:8080/user.html正常。只要确保为您的user页-chunks: ['chunk-vendors', 'chunk-common', 'user']

指定正确的JS块即可

Answer 2

如果您使用Vue中的页面配置，则假定您正在处理的应用程序具有服务器端路由。此配置会将特定页面的JS注入HTML模板中，然后该模板就是通过服务器提供给用户的东西。

如果要使用仅Vue的配置并希望查找更多的单页应用程序结构，则无需使用pages，而只需使用vue-router

结合使用Vue-cli和多个页面，我如何路由到应用内的页面

2 个答案: