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

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

小云云

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

原创

2757人浏览过

创建项目

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

飞蛙B2C微分销商城系统
飞蛙微分销商城系统（FeiWa WeiShop）是一款面向单店铺多用户微商城分销系统，基于目前最流行的WEB2.0的架构，使用php+mysql开发框架，系统全面导入整合最流行的三级分销机制。开发团队拥有成熟、稳定的微电商技术解决方案，是为了快速简化企业微商城应用开发、帮助微商企业快速赚钱而诞生的。

0

查看详情

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

登录后复制