使用vue-cli搭建多页应用

使用vue-cli 3.9搭建多页应用

在vue-cli 3.0之后，官方已经支持通过简单的配置来创建多页应用了，单默认创建的应用还是单页应用，接下来就介绍下我创建多页应用的流程；

第一步，创建项目

官方vue-cli创建项目的教程

• 选择一个合适的目录，打开命令行窗口，运行 vue ui

这里假设你已经安装了 node.js以及vue-cli环境了，若没有安装的话可以先百度一下

弹出网页界面之后，默认是在项目这个标签下的，显示的是当前目录下所有的vue项目，点击创建进入项目创建界面

• 接下来的步骤全部使用默认即可，
  
  

• 具体图形界面的功能可以到处点一点，看一看，这里就不多进行介绍了

• 目录结构大概是这样子的：

  |   .gitignore
  |   babel.config.js
  |   package-lock.json
  |   package.json
  |   README.md
  |   
  +---node_modules...
  +---public
  |       favicon.ico
  |       index.html
  |
  \---src
      |   App.vue
      |   main.js
      |
      +---assets
      |       logo.png
      |
      \---components
              HelloWorld.vue
  

  • 把 src目录整理一下，便于多页面代码组织：

+---assets
|       favicon.ico
|       logo.png
|
+---components
\---pages
    +---index
    |       App.vue
    |       HelloWorld.vue
    |       index.html
    |       main.js
    |
    \---second
            HelloWorld.vue
            second.html
            second.js
            Test.vue

• 这里面的second目录就是我新创建的页面的代码文件了

第二步，配置vue.config.js

vue.config.js配置参考官方文档

以下的多页配置参考的是 官方的配置文档的 pages部分

• vue-cli默认是没有创建vue.config.js的，我们在 package.json同级目录，也就是项目的根目录下创建 vue.config.js文件

const pages ='./src/pages';
module.exports = {
    pages: {
          index: {    //这是默认页
                  // page对应的js的入口        
                  entry: pages+'/index/main.js',
                   // 模板来源，也就是当前页使用哪个html文档作为模版，默认使用 public/index.html        
                   template: pages+'/index/index.html',        
                   // 在 dist/index.html 的输出, 使用npm run build编译输出的路径（相对于 /dist而言）
                   // 若想生成目录，只需要改为 ‘dirname/index.html即可’
                    filename: 'index.html',
           },
           secondpage:      //新创建的第二页，在开发环境下，这里的‘secondpage’就是路由链接
            {        
            		entry: pages+'/second/second.js',       
            		 template: pages+'/second/second.html',        
            		 filename: 'second/second',      
            }
}

• 以上就是多页应用配置的基本过程了