VUE cli 4.x下配置多页面以及同时配置支持element-ui及mint-ui并且优化首页文件大小。

场景，公司的一个小型项目，需同时支持移动端和PC端。最开始考虑做两个独立的项目。但后来考虑到总共只有4个功能页面，布署起来相对麻烦。所以决定做在一个项目里。

1、升级vue-cli到4.x

npm install -g @vue/cli

2、项目创建

vue create multipage

项目配置不做描述，这里选了node_sass, babel, router, vuex

3、安装element-ui和mint-ui

npm install element-ui

npm install mint-ui

4、配置按需引入。

借助 babel-plugin-component，我们可以只引入需要的组件，以达到打包项目体积的目的。

然后，将 .babelrc 修改为：

module.exports = {
  "presets": [
    '@vue/cli-plugin-babel/preset'
  ],
  "plugins": [
    [
      "component",
      {
        "libraryName": "mint-ui",
        "style": true
      },
      "mint-ui"
    ],
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk",
        "style": true
      },
      "element-ui"
    ],
  ]
}

5、安装axios

npm install axios

6、新建移动端和PC端模板页面。

移动端：public/mobile.html

pc端：public/pc.html

7、删除多余目录和文件，新建移动端目录（src/mobile）和PC端目录(src/pc)

新建移动端入口页（src/mobile/main.js）和首页(src/mobile/index.vue)

8、新建vue.config.js，添加多页面设置：

module.exports = {
    pages: {
        mobile: {
            // page 的入口
            entry: "src/mobile/main.js",
            // 模板来源
            template: "public/mobile.html",
            // 在 dist/index.html 的输出
            filename: "mobile/index.html",
            // 当使用 title 选项时，
            // template 中的 title 标签需要是 <title><%= htmlWebpackPlugin.options.title %></title>
            title: "Index Page",
            // 在这个页面中包含的块，默认情况下会包含
            // 提取出来的通用 chunk 和 vendor chunk。
            chunks: ["chunk-vendors", "chunk-common", "mobile"]
        },
        pc: {
            // page 的入口
            entry: "src/pc/main.js",
            // 模板来源
            template: "public/pc.html",
            // 在 dist/index.html 的输出
            filename: "pc/index.html",
            // 当使用 title 选项时，
            // template 中的 title 标签需要是 <title><%= htmlWebpackPlugin.options.title %></title>
            title: "Index Page",
            // 在这个页面中包含的块，默认情况下会包含
            // 提取出来的通用 chunk 和 vendor chunk。
            chunks: ["chunk-vendors", "chunk-common", "pc"]
        },
    }
}

9、查看打包大小：

npm run build

可以看到chunk-vendors.xxx.js大小只有164.32kiB,如果mobile.xxx.js和mobile_index.js做得好，整个项目首次加载应该是超快的。

10、运行项目

npm run serve

提示如下：

App running at:
- Local: http://localhost:8080/
- Network: http://192.168.2.182:8080/

移动端访问方法：http://localhost:8080/mobile/

PC端访问方法：http://localhost:8080/pc/

以上路径可以在vue.config.js中修改。

全剧终。

代码可以在以下地址可以下载：

https://github.com/gavinjzx/multipage