阅读 1215

VueCli3 MPA 多页面配置

Vue Cli 3 多页面应用搭建 -DEMO

  1. 创建项目, 然后采用默认配置

  2. 项目结构

  1. html 模板文件

  1. index.js (每个页面的入口文件)

5. vue 模板文件

6 更改vue.config.js

多页面其实就是指定多个入口,并且指定每个入口js文件的挂载点, 然后入口js文件负责将vue文件引入,渲染到当前模板的 #app 节点上

目前遇到的问题

热模块好像不太成熟,不知道是不是写法问题还是什么

有时候增加页面必须得 npm run serve 之后才能生效

还有的时候,写法变动太大,导致并没有热模块替换

这两种原因如果有一个有问题,就会导致,页面html 能显示, 但是并没有成功将 vue 挂载到那个#app 节点上,导致页面显示空白

第三方模块 (Element UI ,等 )

要引入 Element UI 的话, 我们如果是之前的那种,在main.js文件里面引入Element-UI 那么久相当于全局引用 , 但是我们现在已经成为了多页面, 所以我们只能 一个一个的 按需引入这个模块

我们通过Element UI 的按需加载文档来完成一步步配置 唯一可能要变的就是 babel 那里
我们现在需要更改的 是babel.config.js , 而不是.babellrc

我们将babel.config.js 改成这样

    module.exports = {
  presets: [
    '@vue/app'
  ],
  "plugins": [
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ]
  ]
}
复制代码

然后在我们想要引用的那个页面的入口文件进行按需引入

import Vue from 'vue'
import App from './index.vue'
// import ElementUI from 'element-ui'


// Vue.config.productionTip = false
// import 'element-ui/lib/theme-chalk/index.css';
// Vue.use(ElementUI)
import { Button } from 'element-ui';


Vue.component(Button.name, Button);
new Vue({
  render: h => h(App),
}).$mount('#app')

复制代码

在vue模板文件中,这样使用 就行了

<template>
  <div>
      <el-button>Click Me</el-button>
  </div>
</template>
<script>
export default {
    methods : {
        
    }
}
</script>
<style>
</style>
复制代码

之前全部引入的时候发现当我 npm run build 的时候 , vendor 的size有将近700K , 现在按需加载之后 , vendor 只剩下 87K 了

-a----        2019/8/20     12:21          88237 chunk-vendors.64cf4dfc.js
-a----        2019/8/20     12:21         444797 chunk-vendors.64cf4dfc.js.map
-a----        2019/8/20     12:21           2247 index.1ee277a7.js
-a----        2019/8/20     12:21          11546 index.1ee277a7.js.map
-a----        2019/8/20     12:21           2021 info.2f9c13dd.js
-a----        2019/8/20     12:21          10920 info.2f9c13dd.js.map
-a----        2019/8/20     12:21           2061 list.e75b1e00.js
-a----        2019/8/20     12:21          11007 list.e75b1e00.js.map
复制代码

如果是普通的js 的话, webpack 默认有js tree shaking 来帮我们进行按需加载,这个应该没有什么太大的问题