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

小云云

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

2763人浏览过

来源于php中文网

原创

创建项目

使用 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

Shoping购物网源码
该系统采用多层模式开发，这个网站主要展示女装的经营，更易于网站的扩展和后期的维护，同时也根据常用的SQL注入手段做出相应的防御以提高网站的安全性，本网站实现了购物车,产品订单管理，产品展示，等等，后台实现了动态权限的管理，客户管理，订单管理以及商品管理等等，前台页面设计精致，后台便于操作等。实现了无限子类的添加，实现了动态权限的管理，支持一下一个人做的辛苦

下载

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));
}