使用 vue-cli 开发多页面应用的最简示例

创建项目

使用 vue-cli 创建一个项目

$ vue init webpack vue-multiple-demo

根据控制台的提示，填写相关信息即可。创建完成后，进入该项目根目录并安装依赖。

$ cd vue-multiple-demo
$ npm install

由于是开发多页面应用，该工程就没有配置 vue-router。

最简示例

通过 vue-cli 创建的项目，默认是开发单页应用。如果希望开发多页面，需要调整部分脚本的配置。

入口

在 src 目录下新建一个 demo.js，为方便起见，直接将 main.js 中的内容复制过去。然后，修改 build/webpack.base.conf.js 的 entry 为多个。

entry: {
  app: "./src/main.js",
  demo: "./src/demo.js"
},

模板

在工程根目录下新建一个 demo.html 文件，同样将 index.html 的内容复制过去。为了区分开来，只编辑下 <title> 的内容。

<title>demo</title>

发布地址

在 config/index.js 的 build 配置下，新增一条记录。

index: path.resolve(__dirname, "../dist/index.html"),
demo: path.resolve(__dirname, "../dist/demo.html"),

生产环境配置

调整 build/webpack.prod.conf.js 的 plugins 中，关于 html 的配置。

修改

new HtmlWebpackPlugin({
  filename: config.build.index,
  template: "index.html",
  inject: true,
  minify: {
    removeComments: true,
    collapseWhitespace: true,
    removeAttributeQuotes: true
    // more options:
    // https://github.com/kangax/html-minifier#options-quick-reference
  },
  // necessary to consistently work with multiple chunks via CommonsChunkPlugin
  chunksSortMode: "dependency",
  chunks: ["manifest", "vendor", "app"]
}),

这里主要有两处改动

• filename 直接写死
• 为防止加载不必要的 js，添加 chunks 配置。

新增

new HtmlWebpackPlugin({
  filename: config.build.demo,
  template: "demo.html",
  inject: true,
  minify: {
    removeComments: true,
    collapseWhitespace: true,
    removeAttributeQuotes: true
    // more options:
    // https://github.com/kangax/html-minifier#options-quick-reference
  },
  // necessary to consistently work with multiple chunks via CommonsChunkPlugin
  chunksSortMode: "dependency",
  thunks: ["manifest", "vendor", "demo"]
}),

预览效果

这里不启动本地服务，所以需要修改下静态资源的加载路径，即将 config/index.js 中 build->assetsPublicPath 修改为 ./。

assetsPublicPath: "./",

构建应用

$ npm run build

直接打开 dist 目录中的 html 文件，即可预览效果。

小结

至此，开发多页面的最简示例就完成了。

进一步优化

实际开发中，页面的数量较多，因而需要批量处理以下配置。

文件目录

源码部分 src 的目录结构如下

|--assets
|  |--logo.png
|--components
|  |--HelloWorld.vue
|--entries
|  |--index.js
|  |--list.js
|--templates
|  |--index.html
|  |--list.html

按照约定

• entries 用于存放页面入口的 js 文件
• templates 用于存放页面的模板 html 文件

读取目录

为方便读取页面目录，这里使用 glob 扩展一个方法。

$ npm install glob --save-dev

安装完依赖后，在 build/utils.js 中添加方法

const glob = require("glob")

// 遍历指定目录下的文件
exports.getEntries = (dirPath) => {
  let filePaths = glob.sync(dirPath);
  let entries = {};
  filePaths.forEach(filePath => {
    let filename = filePath.match(/(w+).[html|js]+/)[1];
    entries[filename] = filePath;
  })
  return entries;
}

修改配置

build/webpack.base.conf.js

entry: utils.getEntries("./src/entries/*.js"),

build/webpack.base.prod.conf.js

删除原有的 HtmlWebpackPlugin 相关配置，在文件结束之前遍历添加相关配置即可。

const pages = utils.getEntries("./src/templates/*.html");
for(let page in pages) {
  let fileConfig = {
    filename: path.resolve(__dirname, "../dist/pages/" + page + ".html"),
    template: pages[page],
    inject: true,
    minify: {
      removeComments: true,
      collapseWhitespace: true,
      removeAttributeQuotes: true
    },
    chunksSortMode: "dependency",
    thunks: ["manifest", "vendor"]
  };
  fileConfig.thunks.push(page);
  // 添加插件配置
  webpackConfig.plugins.push(new HtmlWebpackPlugin(fileConfig));
}

config/index.js

由于输出的地址不在这里配置，之前的删不删除都不影响。但是，调整了目录结构，页面中加载静态资源的路径也要做出调整。

assetsPublicPath: "../",

构建并预览

$ npm run build

构建完成后，直接使用浏览器打开 dist 目录下的 html 文件即可预览效果。

总结

简单总结以下，使用 vue-cli 开发多页面应用的几个关键点。

• 多入口
• 多个 HtmlWebpackPlugin
• 静态资源的路径

此文中介绍的配置，不一定适用于所有的开发场景。进一步优化更多的细节，还是要在实际开发中不断实践。

源码

• https://gitee.com/xiaoyucoding/vue-multiple-demo