首页
所有分类
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 相关文章推荐
jquery.ui.draggable中文文档
Nov 24 Javascript
jQuery 追加元素的方法如append、prepend、before
Jan 16 Javascript
JSON取值前判断
Dec 23 Javascript
jquery中animate的stop()方法作用实例分析
Jan 30 Javascript
jquery手风琴特效插件
Feb 04 Javascript
jquery文字填写自动高度的实现方法
Nov 07 Javascript
利用Node.js+Koa框架实现前后端交互的方法
Feb 27 Javascript
JS+HTML实现的圆形可点击区域示例【3种方法】
Aug 01 Javascript
Vue动态修改网页标题的方法及遇到问题
Jun 09 Javascript
微信小程序修改数组长度的问题的解决
Dec 17 Javascript
vue组件库的在线主题编辑器的实现思路
Apr 03 Javascript
JS原生实现轮播图的几种方法
Mar 23 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
form表单(1) Launch Mode(1) Pickle(1) apt命令(1) 缓冲区(1) JOIN(1) 类加载器(1) NoSQL(1) netty(1) json_extract(1)
You might like
十天学会php之第七天
2006/10/09 PHP
Php 构造函数construct的前下划线是双的_
2009/12/08 PHP
HTML5附件拖拽上传drop &amp; google.gears实现代码
2011/04/28 Javascript
JS Range HTML文档/文字内容选中、库及应用介绍
2011/05/12 Javascript
实现点击列表弹出列表索引的两种方式
2013/03/08 Javascript
输入自动提示搜索提示功能的使用说明:sugggestion.txt
2013/09/02 Javascript
JS分页效果示例
2013/10/11 Javascript
JavaScript设置首页和收藏页面的小例子
2013/11/11 Javascript
JS传值出现中文参数乱码的解决方法
2016/06/30 Javascript
JavaScript字符串对象
2017/01/14 Javascript
Node连接mysql数据库方法介绍
2017/02/07 Javascript
使用Dropzone.js上传的示例代码
2017/10/10 Javascript
基于vue.js实现的分页
2018/03/13 Javascript
JS可断点续传文件上传实现代码解析
2020/07/30 Javascript
vant中的toast层级改变操作
2020/11/04 Javascript
在Python中封装GObject模块进行图形化程序编程的教程
2015/04/14 Python
Python中顺序表的实现简单代码分享
2018/01/09 Python
python中copy()与deepcopy()的区别小结
2018/08/03 Python
Python深拷贝与浅拷贝用法实例分析
2019/05/05 Python
通过PHP与Python代码对比的语法差异详解
2019/07/10 Python
使用APScheduler3.0.1 实现定时任务的方法
2019/07/22 Python
Python爬虫爬取糗事百科段子实例分享
2020/07/31 Python
Django vue前后端分离整合过程解析
2020/11/20 Python
Python用Jira库来操作Jira
2020/12/28 Python
意大利制造的男鞋和女鞋：SCAROSSO
2018/03/07 全球购物
应届生法律顾问求职信
2013/11/19 职场文书
正风肃纪剖析材料
2014/02/18 职场文书
绩效工资实施方案
2014/03/15 职场文书
体育节口号
2014/06/19 职场文书
2014党员学习兰辉先进事迹思想汇报
2014/09/17 职场文书
评职称个人总结
2015/03/05 职场文书
2015年计生工作总结范文
2015/04/24 职场文书
寒假致家长的一封信
2015/10/10 职场文书
导游词之崇武古城
2019/10/07 职场文书
mysql连接查询中and与where的区别浅析
2021/07/01 MySQL
使用HttpSessionListener监听器实战
2022/03/17 Java/Android