vue-cli开发多页面应用的简单示例-js教程-PHP中文网

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

小云云

发布： 2018-02-28 14:28:00

原创

2356人浏览过

创建项目

使用 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> 的内容。

<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) =&gt; {
  let filePaths = glob.sync(dirPath);
  let entries = {};
  filePaths.forEach(filePath =&gt; {
    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));
}

登录后复制