问Vue.js命令行界面中的多页

EN

将用户指向应为接受的答案的说明

在发布我最初的答案的那一刻，我并没有意识到在VueJS中实际构建MPA的可能性。我的答案没有解决所问的问题，因此我将建议看看PJ.Wanderson提供的答案，下面哪个应该是被接受的答案

首字母答案

Vue.js项目是SPA(单页面应用程序)。您在整个项目中只有一个.html文件，就是您提到的index.html文件。在vue.js中，您想要创建的“页面”被称为组件。它们将被插入到index.html文件中并在浏览器中呈现。vue.js组件由3部分组成：

<template>

</template>

<script>
export default {

}
</script>

<style>

</style>

CSS模板:它包含您的页面应该显示的所有html (这是您放置pages)

• Script:的html的位置)它包含将在page/component

• Style:上执行的所有JavaScript代码它包含将对特定component/page

应用样式的

您可以查看本教程以获得快速入门的Vue.js 2 Quickstart Tutorial 2017

它解释了vue.js项目结构以及各种文件之间的关系

第一:始终阅读官方文档。有了Vue，你就可以构建一个SPA，而一个MPA也不成问题。只需遵循以下指南：

• https://cli.vuejs.org/
• https://cli.vuejs.org/guide/html-and-static-assets.html#building-a-multi-page-app
• https://cli.vuejs.org/config/#pages

你应该使用Vue CLI3创建一个新项目。一旦你创建了你的项目，就将其设置为手动配置。确保您选择了‘t SPA选项。然后，Vue将使用一种MPA方法创建一个很好的"start“项目。在此之后，只需在vue.config.js上重复配置即可。

更新#1

似乎Vue Cli上的一些更新已经改变了构建一个MPA应用程序的方式，所以：

手动创建新应用程序vue create test

• Choose configuration

创建的样板将用于SPA。因此，请进行以下更改：

• 在src下创建名为pages (可选)

的文件夹

• 进入此文件夹创建您自己的页面:主页、关于等。

• 将App.vue和main.js从源复制并粘贴到您的新文件夹中-主页等。

• 根据您的喜好将App.vue格式化到此文件夹中。

https://cli.vuejs.org/config/#pages：

• 创建一个vue.config.js并像这样设置它

下面，我有三张图片演示了这一点：

• First:一个全新的应用程序
• Second:这个应用程序，加上我在上面所做的更改the : the vue.config.js from

​

​

您不需要创建pages文件夹，这只是为了理解您的想法。

链接到GitHub：Building a MPA App

EDIT：Vue内置了这个。跳到底部了解更多信息。

原始答案：

有两种方法可以解释你的问题，从而回答它。

第一种解释是：“我如何支持路由到同一个单页面应用程序中的不同页面，例如localhost:8080/about和localhost:8080/report等？”解决这个问题的方法是使用路由器。它相当简单，而且效果很好。

第二种解释是：“我的应用程序很复杂，我有多个单页面应用程序，例如一个用于‘网站’部分的应用程序，一个用于用户登录和工作的应用程序，一个用于管理员的应用程序，等等- vue如何在不创建三个完全独立的存储库的情况下做到这一点？”

后者的答案是具有多个单页应用程序的单一存储库。这个演示看起来和你想要的一模一样：

https://github.com/Plortinus/vue-multiple-pages/

请特别查看：https://github.com/Plortinus/vue-multiple-pages/blob/master/vue.config.js

更新答案：

事实证明，vuejs具有内置多个顶级页面的概念。我的意思是，这是有道理的--这将是非常普遍的，尽管许多错误的答案说“不，它是为单页面应用程序”！

您需要在vue.config.js文件中使用pages选项：

https://cli.vuejs.org/config/#pages

如果您的项目在根目录中没有该文件，请创建它，vuejs会发现它。

有一种很长和很短的方式来定义每个页面。我在这里使用了缩写形式：

module.exports = {
  pages: {
    index: 'src/pages/index/main.ts',
    experiment: 'src/pages/experiment/main.ts'
  }
}

你不必把你的工作放在“页面”下。它可以是"/src/apps/index/index.ts“或其他什么。

在移动代码并从以下位置更改一些导入后：

import HelloWorld from './components/HelloWorld'

至

import HelloWorld from '@/components/HelloWorld'

这个应用程序可以工作--但我的repo中的“实验”应用程序必须像这样加载：

http://localhost:8080/experiment.html

相当难看，甚至更糟，因为它使用了路由器，这导致URL如下：

http://localhost:8080/experiment.html/about

呃。

幸运的是，this stackoverflow answer解决了这个问题。更新vue.config.js文件以包含devServer选项(确保该选项位于导出对象的顶层：

devServer: {
  historyApiFallback: {
    rewrites: [
      { from: /\/index/, to: '/index.html' },
      { from: /\/experiment/, to: '/experiment.html' }
    ]
  }
}

然后还修改router.ts文件以附加额外的路径(在我的例子中是“router.ts/”：

export default new Router({
  mode: 'history',
  base: process.env.BASE_URL + 'experiment/',
  ...

然后URL可以很好地解析，例如：http://localhost:8080/experiment/about