首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

详解基于webpack2.x的vue2.x的多页面站点

Posted in Javascript onAugust 21, 2017

本文介绍了基于webpack2.x的vue2.x的多页面站点，分享给大家，具体如下：

vue的多页面

依旧使用vue-cli来初始化我们的项目

然后修改主要目录结构如下：

├── build
│  ├── build.js
│  ├── check-versions.js
│  ├── dev-client.js
│  ├── dev-server.js
│  ├── utils.js
│  ├── vue-loader.conf.js
│  ├── webpack.base.conf.js
│  ├── webpack.dev.conf.js
│  └── webpack.prod.conf.js
├── src
│  ├── pages
│  │  ├── boys
│  │  │  ├── index.html
│  │  │  ├── index.js
│  │  │  └── index.vue
│  │  ├── goods
│  │  │  ├── index.html
│  │  │  ├── index.js
│  │  │  └── index.vue
│  │  ├── index
│  │  │  ├── index.html
│  │  │  ├── index.js
│  │  │  └── index.vue
│  │  └── sotho
│  │    ├── index.html
│  │    ├── index.js
│  │    └── index.vue

编写每个页面

可以看到这里我们有4个单独的页面，分别是boys,goods,index,sotho

首先看boys文件夹中的代码:

index.html

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>vue3</title>
 </head>
 <body>
  <div id="app"></div>
  <!-- built files will be auto injected -->
 </body>
</html>

这个是我们要单独生成的页面,最后也是生成index.html

index.vue

<style scoped>
 .boys {
  background-color: red;
 }
</style>
<template>

 <div id="app" class="boys">
  boys got many things.
 </div>

</template>
<script>

export default {
 name: 'boys'
}

</script>

这是我们的vue文件，可以看成一个组件，其实.vue文件你可以看成一个语法糖，最终会被vue-loader编译成js,生成对应的css,js,dom

index.js

import Vue from 'vue'
import Index from './index.vue'

Vue.config.productionTip = false

new Vue({
 el: '#app',
 template: '<Index/>',
 components: { Index }
})

这就是主要文件了，这里执行vue的实例化，用法同在浏览器端页面中直接引入vue.js文件一样的含义

其他几个页面一样也是同理,具体可以见:

  • https://github.com/zhaoqize/vue-advance/tree/master/vue2-multiple

修改webpack.config.js

由于vue中的配置使用了模块化管理，所以我们需要修改下面两个文件：

1、webpack.base.conf.js

我们需要修改webpack.base.conf.js的入口entry，这是配置多入口文件的重点！

如果不懂多入口含义的化，建议去看下webpack的文档。

webpack.base.conf.js

...

module.exports = {
 entry: {
  'pages/boys/index': './src/pages/boys/index.js', //配置boys页面入口
  'pages/goods/index': './src/pages/goods/index.js', //配置goods页面入口
  'pages/index/index': './src/pages/index/index.js', //配置index页面入口
  'pages/sotho/index': './src/pages/sotho/index.js', //配置sotho页面入口
 },
...

2、webpack.dev.conf.js

这里我们需要修改plugins，它是个强大的即插即用的拓展。

我们使用html-webpack-plugin来生成我们的对于的页面。

...
var HtmlWebpackPlugin = require('html-webpack-plugin')
...

...

module.exports = merge(baseWebpackConfig, {
 ...
 plugins: [
  new webpack.DefinePlugin({
   'process.env': config.dev.env
  }),
   new HtmlWebpackPlugin({
   filename:'./pages/boys/index.html', //指定生成的html存放路径
   template:'./src/pages/boys/index.html', //指定html模板路径
   inject: true, //是否将js等注入页面,以及指定注入的位置'head'或'body'
   chunks:['pages/boys/index'] //需要引入的chunk(模块资源)，不配置就会引入所有页面的资源(js/css),这是个很重要的属性，你可以不配置试试效果
  }),
  new HtmlWebpackPlugin({
   filename:'./pages/goods/index.html',
   template:'./src/pages/goods/index.html',
   inject: true,
   chunks:['pages/goods/index']
  }),
  new HtmlWebpackPlugin({
   filename:'./pages/index/index.html', 
   template:'./src/pages/index/index.html',
   inject: true,
   chunks:['pages/index/index']
  }),
  new HtmlWebpackPlugin({
   filename:'./pages/sotho/index.html',
   template:'./src/pages/sotho/index.html',
   inject: true,
   chunks:['pages/sotho/index']
  }),
  ...
 ]
})

以上就是我们进行多页开发的主要配置项。

开发环境访问页面

运行npm run dev,我们看下怎么访问我们的多页vue应用。

  • http://localhost:9090/pages/index/index.html 访问index页面
  • http://localhost:9090/pages/boys/index.html 访问boys页面
  • http://localhost:9090/pages/goods/index.html 访问goods页面
  • http://localhost:9090/pages/sotho/index.html 访问sotho页面

再来看下我们的dom结构是什么样：

详解基于webpack2.x的vue2.x的多页面站点

页面里的js就是我们通过插件注入的，并且我们是通过指定chunks完成。

build

运行npm run build

➜ vue2-x-multiple git:(master) ✗ npm run build

> vue3@1.0.0 build /study/vue2-x-multiple
> node build/build.js

⠋ building for production...
Starting to optimize CSS...
Processing static/css/pages/boys/index.19ebbc80a1c187989dbf02d03192e84e.css...
Processing static/css/pages/goods/index.fe8f1bc39f33dce4c4d610c2326482c6.css...
Processing static/css/pages/index/index.f6340f14071a89cf2b092da280ffaf8c.css...
Processing static/css/pages/sotho/index.7415ffd3ef7b9d1a4398cba49927b12b.css...
Processed static/css/pages/boys/index.19ebbc80a1c187989dbf02d03192e84e.css, before: 114, after: 44, ratio: 38.6%
Processed static/css/pages/goods/index.fe8f1bc39f33dce4c4d610c2326482c6.css, before: 116, after: 46, ratio: 39.66%
Processed static/css/pages/index/index.f6340f14071a89cf2b092da280ffaf8c.css, before: 92, after: 22, ratio: 23.91%
Processed static/css/pages/sotho/index.7415ffd3ef7b9d1a4398cba49927b12b.css, before: 92, after: 22, ratio: 23.91%
Hash: 2467c91090ccf4690865
Version: webpack 2.5.1
Time: 6319ms
                                Asset    Size Chunks       Chunk Names
static/css/pages/sotho/index.7415ffd3ef7b9d1a4398cba49927b12b.css.map 312 bytes    1 [emitted] pages/sotho/index
               static/js/vendor.d7548891d04d4f883b29.js  83.2 kB    0 [emitted] vendor
         static/js/pages/index/index.b2ce74f4155fb942a064.js 671 bytes    2 [emitted] pages/index/index
         static/js/pages/goods/index.7d0dda2791db2d3b1500.js 702 bytes    3 [emitted] pages/goods/index
          static/js/pages/boys/index.2c268b75ba9424211d79.js 699 bytes    4 [emitted] pages/boys/index
              static/js/manifest.f466ccb58b3271558be5.js  1.57 kB    5 [emitted] manifest
   static/css/pages/boys/index.19ebbc80a1c187989dbf02d03192e84e.css  44 bytes    4 [emitted] pages/boys/index
  static/css/pages/goods/index.fe8f1bc39f33dce4c4d610c2326482c6.css  46 bytes    3 [emitted] pages/goods/index
  static/css/pages/index/index.f6340f14071a89cf2b092da280ffaf8c.css  22 bytes    2 [emitted] pages/index/index
  static/css/pages/sotho/index.7415ffd3ef7b9d1a4398cba49927b12b.css  22 bytes    1 [emitted] pages/sotho/index
             static/js/vendor.d7548891d04d4f883b29.js.map   687 kB    0 [emitted] vendor
       static/js/pages/sotho/index.e706490d7c42ad8e4f73.js.map  5.55 kB    1 [emitted] pages/sotho/index
         static/js/pages/sotho/index.e706490d7c42ad8e4f73.js 674 bytes    1 [emitted] pages/sotho/index
       static/js/pages/index/index.b2ce74f4155fb942a064.js.map  5.55 kB    2 [emitted] pages/index/index
static/css/pages/index/index.f6340f14071a89cf2b092da280ffaf8c.css.map 312 bytes    2 [emitted] pages/index/index
       static/js/pages/goods/index.7d0dda2791db2d3b1500.js.map  5.64 kB    3 [emitted] pages/goods/index
static/css/pages/goods/index.fe8f1bc39f33dce4c4d610c2326482c6.css.map 338 bytes    3 [emitted] pages/goods/index
        static/js/pages/boys/index.2c268b75ba9424211d79.js.map  5.62 kB    4 [emitted] pages/boys/index
 static/css/pages/boys/index.19ebbc80a1c187989dbf02d03192e84e.css.map 333 bytes    4 [emitted] pages/boys/index
            static/js/manifest.f466ccb58b3271558be5.js.map  14.6 kB    5 [emitted] manifest
                       ./pages/boys/index.html 386 bytes     [emitted]
                       ./pages/goods/index.html 389 bytes     [emitted]
                       ./pages/index/index.html 389 bytes     [emitted]
                       ./pages/sotho/index.html 389 bytes     [emitted]

 Build complete.

 Tip: built files are meant to be served over an HTTP server.
 Opening index.html over file:// won't work.

进入dist目录，查看生成的页面

├── pages
│  ├── boys
│  │  └── index.html
│  ├── goods
│  │  └── index.html
│  ├── index
│  │  └── index.html
│  └── sotho
│    └── index.html
└── static
  ├── css
  │  └── pages
  │    ├── boys
  │    │  ├── index.19ebbc80a1c187989dbf02d03192e84e.css
  │    │  └── index.19ebbc80a1c187989dbf02d03192e84e.css.map
  │    ├── goods
  │    │  ├── index.fe8f1bc39f33dce4c4d610c2326482c6.css
  │    │  └── index.fe8f1bc39f33dce4c4d610c2326482c6.css.map
  │    ├── index
  │    │  ├── index.f6340f14071a89cf2b092da280ffaf8c.css
  │    │  └── index.f6340f14071a89cf2b092da280ffaf8c.css.map
  │    └── sotho
  │      ├── index.7415ffd3ef7b9d1a4398cba49927b12b.css
  │      └── index.7415ffd3ef7b9d1a4398cba49927b12b.css.map
  └── js
    ├── manifest.f466ccb58b3271558be5.js
    ├── manifest.f466ccb58b3271558be5.js.map
    ├── pages
    │  ├── boys
    │  │  ├── index.2c268b75ba9424211d79.js
    │  │  └── index.2c268b75ba9424211d79.js.map
    │  ├── goods
    │  │  ├── index.7d0dda2791db2d3b1500.js
    │  │  └── index.7d0dda2791db2d3b1500.js.map
    │  ├── index
    │  │  ├── index.b2ce74f4155fb942a064.js
    │  │  └── index.b2ce74f4155fb942a064.js.map
    │  └── sotho
    │    ├── index.e706490d7c42ad8e4f73.js
    │    └── index.e706490d7c42ad8e4f73.js.map
    ├── vendor.d7548891d04d4f883b29.js
    └── vendor.d7548891d04d4f883b29.js.map

到此为止，一个简单的基于vue2.x的多页应用完成了。

升级

webpack.base.conf.js中的entry入口都是手工写入，如果页面多的话这样肯定有问题。

所以我们通过如下的方式来自动完成这段代码：

var entryJS = glob.sync('./src/pages/**/*.js').reduce(function (prev, curr) {
  prev[curr.slice(6, -3)] = curr;
  return prev;
}, {});

这里的 './src/pages/**/*.js' 我们按照一定的规则去匹配我们的入口j s即可。

生成的的是:

{ 'pages/boys/index': './src/pages/boys/index.js',
 'pages/goods/index': './src/pages/goods/index.js',
 'pages/index/index': './src/pages/index/index.js',
 'pages/sotho/index': './src/pages/sotho/index.js' }

与我们想要的行为一致

同样我们也升级下我们的webpack.dev.conf.js中的plugins

var htmls = glob.sync('./src/pages/**/*.html').map(function (item) {
  return new HtmlWebpackPlugin({
    filename: './' + item.slice(6),
    template: item,
    inject: true,
    chunks:[item.slice(2, -5)]
  });
});

module.exports = merge(baseWebpackConfig, {
 module: {
  rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap })
 },
 // cheap-module-eval-source-map is faster for development
 devtool: '#cheap-module-eval-source-map',
 plugins: [
  new webpack.DefinePlugin({
   'process.env': config.dev.env
  }),
  // https://github.com/glenjamin/webpack-hot-middleware#installation--usage
  new webpack.HotModuleReplacementPlugin(),
  new webpack.NoEmitOnErrorsPlugin(),
  // https://github.com/ampedandwired/html-webpack-plugin
  new FriendlyErrorsPlugin()
 ].concat(htmls)
})

生成的是：

HtmlWebpackPlugin {
 options:
  { template: './src/pages/boys/index.html',
   filename: './pages/boys/index.html',
   hash: false,
   inject: true,
   compile: true,
   favicon: false,
   minify: false,
   cache: true,
   showErrors: true,
   chunks: [ 'pages/boys/index' ],
   excludeChunks: [],
   title: 'Webpack App',
   xhtml: false } }

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持三水点靠木。

详解基于webpack2.x的vue2.x的多页面站点

- Author -

leslie·Zhao

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
iframe的父子窗口之间的对象相互调用基本用法
Sep 03 Javascript
jQuery使用attr()方法同时设置多个属性值用法实例
Mar 26 Javascript
跟我学习javascript的浮点数精度
Nov 16 Javascript
JavaScript开发Chrome浏览器扩展程序UI的教程
May 16 Javascript
JavaScript实现自定义媒体播放器方法介绍
Jan 03 Javascript
angular中的http拦截器Interceptors的实现
Feb 21 Javascript
ES6新数据结构Map功能与用法示例
Mar 31 Javascript
jQuery Ajax async=&gt;false异步改为同步时,解决导致浏览器假死的问题
Jul 22 jQuery
Webpack中loader打包各种文件的方法实例
Sep 03 Javascript
layui加载数据显示loading加载完成loading消失的实例代码
Sep 23 Javascript
JS面向对象编程基础篇（二） 封装操作实例详解
Mar 03 Javascript
JavaScript实现串行请求的示例代码
Sep 14 Javascript
Vue中的ref作用详解(实现DOM的联动操作)
Aug 21 #Javascript
jquery动态赋值id与动态取id方法示例
Aug 21 #jQuery
详解webpack的配置文件entry与output
Aug 21 #Javascript
jQuery模拟爆炸倒计时功能实例代码
Aug 21 #jQuery
原生JS 购物车及购物页面的cookie使用方法
Aug 21 #Javascript
webpack3+React 的配置全解
Aug 21 #Javascript
详解Vue微信公众号开发踩坑全记录
Aug 21 #Javascript
表结构(1) 字段分割(1) 控制流(1) Simhash(1) 查询效率(1) REGEXP(1) 分布式追踪(1) group by(1) Express(1) delete in(1)
You might like
基于PHPExcel的常用方法总结
2013/06/13 PHP
PHP的邮件群发系统phplist配置方法详细总结
2016/03/30 PHP
PHP使用http_build_query()构造URL字符串的方法
2016/04/02 PHP
php使用SAE原生Mail类实现各种类型邮件发送的方法
2016/10/10 PHP
php cli模式下获取参数的方法
2017/05/05 PHP
php大小写转换函数(strtolower、strtoupper)用法介绍
2017/11/17 PHP
Yii 框架控制器创建使用及控制器响应操作示例
2019/10/14 PHP
原型方法的不同写法居然会影响调试的解决方法
2007/03/08 Javascript
jquery ajax提交整个表单元素的快捷办法
2013/03/27 Javascript
浅析JavaScript中的delete运算符
2013/11/30 Javascript
Jquery简单实现GridView行高亮的方法
2015/06/15 Javascript
jquery获得当前html页面源码的方法
2015/07/14 Javascript
基于jquery实现的树形菜单效果代码
2015/09/06 Javascript
jqueryMobile使用示例分享
2016/01/12 Javascript
javascript的document中的动态添加标签实现方法
2016/10/24 Javascript
为Jquery EasyUI 组件加上清除功能的方法(详解)
2017/04/13 jQuery
Angular4开发解决跨域问题详解
2017/08/28 Javascript
浅谈super-vuex使用体验
2018/06/25 Javascript
JS实现select选中option触发事件操作示例
2018/07/13 Javascript
vue组件之间通信实例总结(点赞功能)
2018/12/05 Javascript
VUE前后端学习tab写法实例
2019/08/06 Javascript
生成无限制的微信小程序码的示例代码
2019/09/20 Javascript
javascript设计模式 ? 工厂模式原理与应用实例分析
2020/04/09 Javascript
PyQt5实现简单数据标注工具
2019/03/18 Python
python3实现小球转动抽奖小游戏
2020/04/15 Python
Kate Spade美国官网：纽约新兴时尚品牌，以包包闻名于世
2017/11/09 全球购物
英国女鞋购物网站：Moda in Pelle
2019/02/18 全球购物
New Balance澳大利亚官网：运动鞋和健身服装
2019/02/23 全球购物
信号量和自旋锁的区别？如何选择使用？
2015/09/08 面试题
公司成本主管岗位责任制
2014/02/21 职场文书
《小小竹排画中游》教学反思
2014/02/26 职场文书
师范学院毕业生求职信
2014/06/24 职场文书
个人思想政治总结
2015/03/05 职场文书
保研专家推荐信范文
2015/03/25 职场文书
运动会5000米加油稿
2015/07/21 职场文书
Win11 PC上的Outlook搜索错误怎么办?
2022/07/15 数码科技