Vue火得不行了，尤其是在做SPA（Single Page Application）方面特别给力。但如果遇到了需要做MPA（Multi Page Application）的情况，别着急，Vue的开发方法依然容易上手！下面这篇文章就让我们一起探索Vue的使用之道，学习了解下多页面应用和单页面应用的区别、用Vue CLI进行多页面开发的技巧、怎样设置多页面应用、如何开始制作页面组件、最后如何搭建完工运行。别忘了收藏！

多页面应用和单页面应用的区别

简单来说，单页面应用就是所有东西都是靠JavaScript动态产生的只需一个小小的HTML就能搞定咯。你想更换组件、切换画面之类的，完全不用整个APP重载。至于多页面应用？它每页都有自己的HTML文件，这样每次进入新的页面，浏览器都会再次下载！不过，这种形式更像是为满足搜索引擎优化（SEO）或特定单页需求而生的。

使用 Vue CLI 创建多页面应用

简单说，用Vue CLI就能轻易制作出多页面应用。这东西是官方给咱们提供的好用脚手架工具，搞定了标准化开发环境和流程。先下载Vue CLI，然后就可以开始做多页面！它会帮你创建一个新项目，而且里面提前设置好了Vue CLI的多页面模板，还包含了”src/pages”文件夹里的两张示例页哟。

npm install -g @vue/cli

配置多页面应用

vue create my-app --preset multi-page

首先，咱们要搞定Vue CLI，让它可以支持多页面的网站。找到那个叫”vue.config.js”的东东，往里加两条规则，把首页和关于我们这页加进去。首页和关于我们这页就藏在”src/pages/index”和”src/pages/about”这两个地方呀。然后给每个页面起个名儿，这就叫入口文件顺便还给每张页面准备个模板文件，简单来说就是展示页面结构的东西！

创建页面组件

好，接下来需要搞点小配件儿来搭配每一页！靠谱的APP里都应该有”src/pages/index/components”这样的环节然后，还有”src/pages/about/components”。比如，我们可以轻轻地做两个叫做”Header”小伙子跟一个叫做”Footer”的大兄弟，然后把它们放到每一都能用上就完工~

module.exports = {
  pages: {
    index: {
      entry: 'src/pages/index/main.js',
      template: 'src/pages/index/index.html',
      filename: 'index.html'
    },
    about: {
      entry: 'src/pages/about/main.js',
      template: 'src/pages/about/about.html',
      filename: 'about.html'
    }
  }
}

构建和运行应用

搞定了多页应用！搞定设置跟零件制作后，就得让它跑起来了。用这几个命令，让你的应用动起来，自动生成”dist/index.html”和”dist/about.html”。接下来就是启动开发服务器，执行特定的指令就能看到你的多页面应用，还可以直接在浏览器里试看哟。

搞定以上几招，你就可以用 Vue 轻松建多个网页了，每个网页都好看又好用！Vue CLI 就是个救星，帮助你快速做好框架。加上”vue.config.js”这个神奇的文件，再把各种页面组件搭配合适，你的应用就会变得强大无比！

你得明白，虽然实践项目主要看基本设定，但还得关注性能提升、代码规整以及跨浏览器兼容这些事嘞！而且，把组件分得顺手些、晚点儿找资源、避免多次HTTP请求，这都能让性能高些！

  

    

    
{{ title }}
    
{{ message }}
    


import Header from '@/components/Header.vue'
import Footer from '@/components/Footer.vue'
export default {
  components: {
    Header,
    Footer
  },
  data() {
    return {
      title: 'About',
      message: 'This is the about page.'
    }
  }
}

别忘了，编程时要注意维护和扩容性。代码整洁有序，变量易懂，注释详细，可以让我们的项目更好打理

还有，做项目得搞定一堆数据管理和路由路径设定啥的。Vuex就是用来管理状态的利器，路由保护器能帮你控制权限，这些东西加在一起，保证让你的项目妥妥滴！

要搞好 Vue 的多页应用，关键是要先理顺一切，接着就得不停地调整和改进，只有这样才能让自己的技能更进一步。

npm run build

。