首页
所有分类
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 相关文章推荐
一个挺有意思的Javascript小问题说明
Sep 26 Javascript
js判断IE浏览器版本过低示例代码
Nov 22 Javascript
jQuery DOM删除节点操作指南
Mar 03 Javascript
Bootstrap每天必学之js插件
Nov 30 Javascript
BootStrap中
Dec 10 Javascript
RequireJS 依赖关系的实例(推荐)
Jan 21 Javascript
干货!教大家如何选择Vue和React
Mar 13 Javascript
ionic2懒加载配置详解
Sep 01 Javascript
详解Angularjs 自定义指令中的数据绑定
Jul 19 Javascript
全面分析JavaScript 继承
May 30 Javascript
node.js实现带进度条的多文件上传
Mar 27 Javascript
vue 封装 Adminlte3组件的实现
Mar 18 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
土耳其购物网站(10) 泰国购物网站(30) 波兰购物网站(52) 斯洛伐克购物网站(7) 欧洲购物网站(15) 荷兰购物网站(99) 葡萄牙购物网站(13) 哥伦比亚购物网站(5) 阿联酋购物网站(26) 奥地利购物网站(28)
You might like
php中的数组操作函数整理
2008/08/18 PHP
PHP安全性漫谈
2012/06/28 PHP
phpize的深入理解
2013/06/03 PHP
Smarty模板常见的简单应用分析
2016/11/15 PHP
js实现在字符串中提取数字
2013/11/05 Javascript
含有CKEditor的表单如何提交
2014/01/09 Javascript
Javascript学习笔记之 函数篇（三） : 闭包和引用
2014/11/23 Javascript
浅谈类似于(function(){}).call()的js语句
2015/03/30 Javascript
js实现选中复选框文字变色的方法
2015/08/14 Javascript
jQuery+css实现炫目的动态块漂移效果
2016/01/28 Javascript
jQuery悬停文字提示框插件jquery.tooltipster.js用法示例【附demo源码下载】
2016/07/19 Javascript
jQuery模拟Marquee实现无缝滚动效果完整实例
2016/09/29 Javascript
5种JavaScript脚本加载的方式
2017/01/16 Javascript
Node.js中读取TXT文件内容fs.readFile()用法
2018/10/10 Javascript
JS求1到任意数之间的所有质数的方法详解
2019/05/20 Javascript
JQuery实现ul中添加LI和删除指定的Li元素功能完整示例
2019/10/16 jQuery
基于小程序请求接口wx.request封装的类axios请求
2020/07/02 Javascript
Vue切换组件实现返回后不重置数据,保留历史设置操作
2020/07/21 Javascript
Python3编码问题 Unicode utf-8 bytes互转方法
2018/10/26 Python
python的xpath获取div标签内html内容,实现innerhtml功能的方法
2019/01/02 Python
Python实现的矩阵转置与矩阵相乘运算示例
2019/03/26 Python
由面试题加深对Django的认识理解
2019/07/19 Python
Python上下文管理器用法及实例解析
2019/11/11 Python
Python字典中的值为列表或字典的构造实例
2019/12/16 Python
检测tensorflow是否使用gpu进行计算的方式
2020/02/03 Python
Django跨域资源共享问题(推荐)
2020/03/09 Python
iRobot官网：改变生活的家用机器人品牌
2016/09/20 全球购物
西班牙最大的在线滑板和街头服饰商店：Fillow.net
2019/04/15 全球购物
俄罗斯在线服装店：STOLNIK
2021/03/07 全球购物
环境工程大学生个人的自我评价
2013/10/08 职场文书
施工安全协议书
2013/12/11 职场文书
幼儿园庆六一游园活动方案
2014/01/29 职场文书
暑期培训班策划方案
2014/08/26 职场文书
会计稽核岗位职责
2015/04/13 职场文书
PHP 对接美团大众点评团购券(门票)的开发步骤
2021/04/03 PHP
利用python实时刷新基金估值(摸鱼小工具)
2021/09/15 Python