基于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
- https://git.oschina.net/zqzjszqzjs/vue2-x-multiple
修改webpack.config.js
由于vue中的配置使用了模块化管理，所以我们需要修改下面两个文件：
- 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页面入口
},
...
- 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结构是什么样：
页面里的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的多页面站点的更多相关文章
- 基于.NetCore开发博客项目 StarBlog - (6) 页面开发之博客文章列表
系列文章 基于.NetCore开发博客项目 StarBlog - (1) 为什么需要自己写一个博客? 基于.NetCore开发博客项目 StarBlog - (2) 环境准备和创建项目 基于.NetC ...
- 基于.NetCore开发博客项目 StarBlog - (7) 页面开发之文章详情页面
系列文章 基于.NetCore开发博客项目 StarBlog - (1) 为什么需要自己写一个博客? 基于.NetCore开发博客项目 StarBlog - (2) 环境准备和创建项目 基于.NetC ...
- 用webpack2.0构建vue2.0超详细精简版
初始化环境 npm init -y 初始化项目 安装各种依赖项 npm install --save vue 安装vue2.0 npm install --save-dev webpack@^2.1. ...
- 用webpack2.0构建vue2.0单文件组件超级详细精简实例
npm init -y 初始化项目 //-y 为自动生成package.json,如果需要自行配置,去掉-y即可 安装各种依赖项 npm install --save vue 安装vue2.0 np ...
- 基于Vue2.0的单页面开发方案
2016的最后一天,多多少少都应该总结一下这一年的得失,哪里做的好,哪里需要改进,记一笔,或许将来会用到呢. 毕业差不多半年了,一直是一个人在负责公司项目的前端开发与维护,当时公司希望前后端分离,提高 ...
- 基于laravel5.5和vue2开发的个人博客
本项目使用 PHP 框架 Laravel 5.5 进行开发.系统后台使用了Vuejs + Element-UI实现完全的前后端分离. 项目地址:http://phpjourney.xin(正在备案,暂 ...
- webpack2.0构建vue2.0超详细精简版
原文地址:http://blog.csdn.net/dahuzix/article/details/55549387 npm init -y 初始化项目 安装各种依赖项 npm install --s ...
- 构建基于WinRT的WP8.1 App 01：页面导航及页面缓存模式
本篇博文主要阐述基于Windows Runtime的Windows Phone 应用页面间导航相关知识,主要分为以下几个方面: Window.Frame和Page概览 页面间实现跳转 处理物理后退键 ...
- 基于VS2017的Docker Support体检ASP.NET Core站点的Docker部署
最近在学习如何用 Docker 部署生产环境中的 ASP.NET Core 站点,作为一个 Docer 新手,从何处下手更容易入门呢?一开始就手写 Docker 配置文件(Docfile, docke ...
随机推荐
- Java基础二：常量池
目录: 自动装箱与拆箱 常量池 ==与equals()区别 1. 自动装箱与拆箱 Java是一个近乎纯洁的面向对象编程语言,但是为了编程的方便还是引入了基本数据类型,但是为了能够将这些基本数据类型当成 ...
- java学习笔记 --- java基础语法
一.java标识符,关键字,保留字 1.标识符 用来增强程序阅读性自定义的名字.类名,变量名,方法名等都可以被称为标识符 标识符的组成: 1.由数字(0-9),字母(a-z,A-Z),下划线(_),美 ...
- MVC5 DB FIRST
跟着师父一直在做codefirst的开发,最近有个新需求,就是需要人家的数据库,然后来开发,现在出现问题了.整理如下 目前有个现成的我们之前的codefirst的工程代码,我记得师父说过,根据数据库生 ...
- 【干货分享】sketch 前端开发常用技巧总结
sketch横空出世,移动端的应用越来越多的采用sketch来做,前端开发也需要掌握更多sketch技巧. (1) sketch导出图片时,如何快速选择多个图层? 1. 在画布上任一点单击并拖拽出一个 ...
- Nagios安装部署
p.MsoNormal,li.MsoNormal,div.MsoNormal { margin: 0cm; margin-bottom: .0001pt; line-height: 150%; fon ...
- WPF自定义控件(2)——图表设计[1]
0.小叙闲言 除了仪表盘控件比较常用外,还有图表也经常使用,同样网上也有非常强大的图表控件,有收费的(DEVexpress),也有免费的.但我们平时在使用时,只想简单地绘一个图,控件库里面的许多功能我 ...
- linux cut命令详解
cut是一个选取命令,就是将一段数据经过分析,取出我们想要的.一般来说,选取信息通常是针对"行"来进行分析的,并不是整篇信息分析的. (1)其语法格式为:cut [-bn] [f ...
- JS实现轻量级计算器
想尝试做一个网页版计算器后,参考了很多博客大神的代码,综合归纳.总结修改,整理如下文. 附: Demo 源码 一.HTML+CSS 具体结构样式如下图,基本参照手机计算器界面.按钮功能可以查 ...
- seo从业者发展方向
对于很多朋友来说,seo就是一项比较简单的技能,内容+外链,就可以基本囊括seo的基本内容了.可能很多朋友对此不屑一顾,会说seo可是包含万象, 你需要懂网页设计.标签设计,分词优化.企业建站等等方面 ...
- Layoutparams理解
一. layoutparams是什么LayoutParams继承于Android.View.ViewGroup.LayoutParamsLayoutParams只是ViewGroup的一个内部类 vi ...