Vue CLI3基础学习之pages构建多页应用

首先我们可以把多页应用理解为由多个单页构成的应用，而何谓多个单页呢？其实你可以把一个单页看成是一个 html 文件，那么多个单页便是多个 html 文件，多页应用便是由多个 html 组成的应用，如下图所示

既然多页应用拥有多个 html ，那么同样其应该拥有多个独立的入口文件、组件、路由、 vuex 等。没错，说简单一点就是多页应用的每个单页都可以拥有单页应用 src 目录下的文件及功能，我们来看一下一个基础多页应用的目录结构

├── node_modules               # 项目依赖包目录
├── build                      # 项目 webpack 功能目录
├── config                     # 项目配置项文件夹
├── src                        # 前端资源目录
│   ├── images                 # 图片目录
│   ├── components             # 公共组件目录
│   ├── pages                  # 页面目录
│   │   ├── page1              # page1 目录
│   │   │   ├── components     # page1 组件目录
│   │   │   ├── router         # page1 路由目录
│   │   │   ├── views          # page1 页面目录
│   │   │   ├── page1.html     # page1 html 模板
│   │   │   ├── page1.vue      # page1 vue 配置文件
│   │   │   └── page1.js       # page1 入口文件
│   │   ├── page2              # page2 目录
│   │   └── index              # index 目录
│   ├── common                 # 公共方法目录
│   └── store                  # 状态管理 store 目录
├── .gitignore                 # git 忽略文件
├── .env                       # 全局环境配置文件
├── .env.dev                   # 开发环境配置文件
├── .postcssrc.js              # postcss 配置文件
├── babel.config.js            # babel 配置文件
├── package.json               # 包管理文件
├── vue.config.js              # CLI 配置文件
└── yarn.lock                  # yarn 依赖信息文件

vue-cli3构建多页面应用

创建一个项目hello-world

vue create hello-world
cd hello-world
npm run serve

在src目录下新建pages目录，在pages下新建页面

App.vue和main.js无用，可以删除，文件名对应着页面名

===index.js==========================================================================
        import Vue from 'vue'
        import App from './index.vue'
        Vue.config.productionTip = false
        new Vue({
             render: h => h(App)
        }).$mount('#app')

index.vue=====================================================================================

  <template>
         <div id="app">
             <h1>page2</h1>
        </div>
    </template>
    <script>
                export default {
                  name: 'page2'
                   }
    </script>

 

根目录下新建vue.config.js=======================================================================

let glob = require('glob')
//配置pages多页面获取当前文件夹下的html和js
function getEntry(globPath) {
        let entries = {}, tmp, htmls = {};
        // 读取src/pages/**/底下所有的html文件
       glob.sync(globPath+'html').forEach(function(entry) {
              tmp = entry.split('/').splice(-3);
             htmls[tmp[1]] = entry
        })

       // 读取src/pages/**/底下所有的js文件
       glob.sync(globPath+'js').forEach(function(entry) {
            tmp = entry.split('/').splice(-3);
            entries[tmp[1]] = {
            entry,
            template: htmls[tmp[1]] ? htmls[tmp[1]] : 'index.html', //  当前目录没有有html则以共用的public/index.html作为模板
            filename:tmp[1] + '.html'   //  以文件夹名称.html作为访问地址
        };
    });
    console.log(entries)
    return entries;
}
let htmls = getEntry('./src/pages/**/*.');
module.exports = {
    pages:htmls,
    publicPath: './',           //  解决打包之后静态文件路径404的问题
    outputDir: 'output',        //  打包后的文件夹名称，默认dist
    devServer: {
        open: true,             //  npm run serve 自动打开浏览器
        index: '/page1.html'    //  默认启动页面
    }
}

访问页面

运行npm run serve就能访问啦

index页面：http://localhost:8080/ 或者http://localhost:8080/index.html （如果没有index文件夹）

page1: http://localhost:8080/page1.html

page2: http://localhost:8080/page2.html