项目示例地址: https://github.com/ccyinghua/webpack-multipage

项目运行:

下载项目之后

# 下载依赖
npm install # 运行
npm run dev http://localhost:3000/login.html
http://localhost:3000/index.html

一、开发环境

node v6.11.0

二、安装vue-cli脚手架

npm install vue-cli@2.8.2 -g

三、初始化项目

vue init webpack webpack-multipage  // 创建项目

cd webpack-multipage  // 进入webpack-multipage目录

npm install  // 下载依赖

npm run dev // 运行

http://localhost:8080

四、修改配置支持多页面

将项目根目录index.html,src下的文件删除,重新调整的src结构目录:

|-- src
|-- assets
|-- components
|-- entry
|-- index // index模块
|-- components
|-- Hello.vue
|-- router
|-- index.js
|-- index.html
|-- index.js
|-- index.vue
|-- login // login模块
|-- login.html
|-- login.js
|-- login.vue

(1) 修改build/util.js,在文件最后添加

# 先下载glob组件
npm install glob -D

将目录映射成配置。如./src/entry/login/login.js变成映射{login: './src/entry/login/login.js'}

var glob = require('glob');
exports.getEntries = function (globPath) {
var entries = {}
glob.sync(globPath).forEach(function (entry) {
var basename = path.basename(entry, path.extname(entry), 'router.js');
entries[basename] = entry
});
return entries;
}

(2) 修改build/webpack.base.conf.js,找到entry属性,使用了uitls.js文件中新添加的方法getEntries,将entry中的js都映射成程序的入口

module.exports = {
entry: utils.getEntries('./src/entry/*/*.js'),
...
}

(3) 修改build/webpack.dev.conf.js

删除文件内原有的HtmlWebpackPlugin相关内容

...
// https://github.com/ampedandwired/html-webpack-plugin
new HtmlWebpackPlugin({
filename: 'index.html',
template: 'index.html',
inject: true
}),
...

在文件最后添加

var pages = utils.getEntries('./src/entry/*/*.html')
for(var page in pages) {
// 配置生成的html文件,定义路径等
var conf = {
filename: page + '.html',
template: pages[page], //模板路径
inject: true,
// excludeChunks 允许跳过某些chunks, 而chunks告诉插件要引用entry里面的哪几个入口
// 如何更好的理解这块呢?举个例子:比如本demo中包含两个模块(index和about),最好的当然是各个模块引入自己所需的js,
// 而不是每个页面都引入所有的js,你可以把下面这个excludeChunks去掉,然后npm run build,然后看编译出来的index.html和about.html就知道了
// filter:将数据过滤,然后返回符合要求的数据,Object.keys是获取JSON对象中的每个key
excludeChunks: Object.keys(pages).filter(item => {
return (item != page)
})
}
// 需要生成几个html文件,就配置几个HtmlWebpackPlugin对象
devWebpackConfig.plugins.push(new HtmlWebpackPlugin(conf))
}

(4) 修改build/webpack.prod.conf.js

删除文件内原有的HtmlWebpackPlugin相关内容

...
// generate dist index.html with correct asset hash for caching.
// you can customize output by editing /index.html
// see https://github.com/ampedandwired/html-webpack-plugin
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'
}),
...

在文件最后添加

var pages = utils.getEntries('./src/entry/*/*.html')
for(var page in pages) {
// 配置生成的html文件,定义路径等
var conf = {
filename: page + '.html',
template: pages[page], //模板路径
inject: true,
// excludeChunks 允许跳过某些chunks, 而chunks告诉插件要引用entry里面的哪几个入口
// 如何更好的理解这块呢?举个例子:比如本demo中包含两个模块(index和about),最好的当然是各个模块引入自己所需的js,
// 而不是每个页面都引入所有的js,你可以把下面这个excludeChunks去掉,然后npm run build,然后看编译出来的index.html和about.html就知道了
// filter:将数据过滤,然后返回符合要求的数据,Object.keys是获取JSON对象中的每个key
excludeChunks: Object.keys(pages).filter(item => {
return (item != page)
}),
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'
}
// 需要生成几个html文件,就配置几个HtmlWebpackPlugin对象
module.exports.plugins.push(new HtmlWebpackPlugin(conf))
}

(5)修改config/index.js

'use strict'
// Template version: 1.3.1
// see http://vuejs-templates.github.io/webpack for documentation. const path = require('path') module.exports = {
dev: {
env: require('./dev.env'), // 引入当前目录下的dev.env.js,用来指明开发环境
port: 3000, // dev-server的端口号,可以自行更改
autoOpenBrowser: true, // 是否自定代开浏览器 // Paths
assetsSubDirectory: 'static',
assetsPublicPath: '/',
// 下面是代理表,作用是用来,建一个虚拟api服务器用来代理本机的请求,只能用于开发模式
proxyTable: {
"/demo/api":"http://localhost:8080"
}, // Various Dev Server settings
host: 'localhost', // can be overwritten by process.env.HOST
autoOpenBrowser: false,
errorOverlay: true,
notifyOnErrors: true,
poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions- /**
* Source Maps
*/ // https://webpack.js.org/configuration/devtool/#development
devtool: 'cheap-module-eval-source-map', // If you have problems debugging vue-files in devtools,
// set this to false - it *may* help
// https://vue-loader.vuejs.org/en/options.html#cachebusting
cacheBusting: true, // CSS Sourcemaps off by default because relative paths are "buggy"
// with this option, according to the CSS-Loader README
// (https://github.com/webpack/css-loader#sourcemaps)
// In our experience, they generally work as expected,
// just be aware of this issue when enabling this option.
// 是否生成css,map文件,上面这段英文就是说使用这个cssmap可能存在问题,但是按照经验,问题不大,可以使用
cssSourceMap: false
}, build: {
env: require('./prod.env'), // 导入prod.env.js配置文件,只要用来指定当前环境 // Template for index.html
index: path.resolve(__dirname, '../dist/index.html'), // 相对路径的拼接 // Paths
assetsRoot: path.resolve(__dirname, '../dist'), // 静态资源的根目录 也就是dist目录
assetsSubDirectory: 'static', // 静态资源根目录的子目录static,也就是dist目录下面的static
assetsPublicPath: '/', // 静态资源的公开路径,也就是真正的引用路径 /**
* Source Maps
*/
productionSourceMap: true, // 改成false运行时不会出现map调试文件。;是否生成生产环境的sourcmap,sourcmap是用来debug编译后文件的,通过映射到编译前文件来实现
// https://webpack.js.org/configuration/devtool/#production
devtool: '#source-map', // Gzip off by default as many popular static hosts such as
// Surge or Netlify already gzip all static assets for you.
// Before setting to `true`, make sure to:
// npm install --save-dev compression-webpack-plugin
productionGzip: false, // 是否在生产环境中压缩代码,如果要压缩必须安装compression-webpack-plugin
productionGzipExtensions: ['js', 'css'], // 定义要压缩哪些类型的文件 // Run the build command with an extra argument to
// View the bundle analyzer report after build finishes:
// `npm run build --report`
// Set to `true` or `false` to always turn it on or off
// 下面是用来开启编译完成后的报告,可以通过设置值为true和false来开启或关闭
// 下面的process.env.npm_config_report表示定义的一个npm_config_report环境变量,可以自行设置
bundleAnalyzerReport: process.env.npm_config_report
}
}
assetsRoot:执行npm run build之后,项目生成的文件放到哪个目录中。vue生成的文件都是静态文件,可以放在nginx中,也可以放到Spring Boot项目的resources/static目录中。
assetsPublicPath:项目的根路径。注意,这个属性在build、dev两个环境都有,修改时,应该同时修改两处。
port:这里改成3000,这个是在开发时,webpack-dev-server运行的端口。
proxyTable:这个属性用于将请求转发到指定地址去。这里的配置意思是将所有以/demo/api开头的请求,都转发到http://localhost:8080地址。

五、建立页面

index/index.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>index</title>
</head>
<body>
<div id="app"></div>
</body>
</html>

index/index.js

import Vue from 'vue'
import IndexView from './index.vue'
import router from './router' // import VueResource from 'vue-resource'; // 使用前先npm install vue-resource --save下载vue-resource
// Vue.use(VueResource); new Vue({
el: '#app',
router,
render: h => h(IndexView)
});

index/index.vue

<template>
<div>
<router-view></router-view>
</div>
</template> <script>
export default {
}
</script> <style>
</style>

index/router/index.js

import Vue from 'vue'
import Router from 'vue-router'
import Hello from '../components/Hello.vue' Vue.use(Router); export default new Router({
routes: [
{
path: '/',
name: 'Hello',
component: Hello
}
]
})

index/components/Hello.vue

<template>
<div>
Hello {{ name }}
</div>
</template> <script>
export default {
data(){
return {
name: "admin"
}
},
mounted(){
//this.$http.get("/demo/api/userinfo").then(resp =>{
// this.name = resp.data.data;
//});
}
}
</script> <style>
</style>

login/login.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>login</title>
</head>
<body>
<div id="app"></div>
</body>
</html>

login/login.js

import Vue from 'vue'
import LoginView from './login.vue' // import VueResource from 'vue-resource';
// Vue.use(VueResource); new Vue({
el: '#app',
render: h => h(LoginView)
})

login/login.vue

<template>
<div>
<form id="login-form">
<label for="username">用户名:</label>
<input type="text" id="username" name="username"> <br> <label for="password">密码:</label>
<input type="password" id="password" name="password"><br> <br> <button @click.prevent="submit">登录</button>
</form>
</div>
</template> <script>
export default {
methods:{
submit(){
window.location = "/demo/index.html";
//let formData = new FormData(document.getElementById("login-form")); //this.$http.post("/demo/api/login", formData).then(resp => {
// if (resp.data.status === 200){
// window.location = "/index.html";
// }else {
// alert(resp.data.desc);
// }
//})
}
}
}
</script> <style>
</style>

六、运行

http://localhost:3000/login.html

http://localhost:3000/index.html

vue webpack多页面构建的更多相关文章

  1. webpack 多页面构建

    目标: 基于webpack支持react多页面构建(不用gulp,gulp-webpack 构建速度太慢[3]), generator-react-webpack 对单页面支持很好,但对多页面,需要改 ...

  2. [转] vue&webpack多页面配置

    前言 最近由于项目需求,选择使用vue框架,webpack打包直接使用的vue-cli,因为需要多页面而vue-cli只有单页面,所以就决定修改vue-cli的配置文件来满足开发需求. html-we ...

  3. vue&webpack多页面配置

    前言 最近由于项目需求,选择使用vue框架,webpack打包直接使用的vue-cli,因为需要多页面而vue-cli只有单页面,所以就决定修改vue-cli的配置文件来满足开发需求. html-we ...

  4. 【原创】从零开始搭建Electron+Vue+Webpack项目框架,一套代码,同时构建客户端、web端(二)

    摘要:上篇文章说到了如何新建工程,并启动一个最简单的Electron应用.“跑起来”了Electron,那就接着把Vue“跑起来”吧.有一点需要说明的是,webpack是贯穿这个系列始终的,我也是本着 ...

  5. 使用Vue和djangoframwork完成登录页面构建 001

    使用Vue和djangoframwork完成登录页面构建 001 环境的搭建 首先,我在我的电脑的F盘创建了一个文件夹 forNote,进入到这个文件夹中 F:\forNote> vue环境的搭 ...

  6. Vue实战Vue-cli项目构建(Vue+webpack系列之一)

    用Vue比较长一段时间了,大大小小做了一些项目,最近想总结一下知识点,出一个Vue+webpack系列,先从项目构建说起--vue-cli. 由于是Vue+webpack这里就不赘述git那些东西,默 ...

  7. 高性能流媒体服务器EasyDSS前端重构(一)-从零开始搭建 webpack + vue + AdminLTE 多页面脚手架

    本文围绕着实现EasyDSS高性能流媒体服务器的前端框架来展开的,具体EasyDSS的相关信息可在:www.easydss.com 找到! EasyDSS 高性能流媒体服务器前端架构概述 EasyDS ...

  8. 高性能流媒体服务器EasyDSS前端重构(三)- webpack + vue + AdminLTE 多页面引入 element-ui

    接上篇 接上篇<高性能流媒体服务器EasyDSS前端重构(二) webpack + vue + AdminLTE 多页面提取共用文件, 优化编译时间> 本文围绕着实现EasyDSS高性能流 ...

  9. 高性能流媒体服务器EasyDSS前端重构(二) webpack + vue + AdminLTE 多页面提取共用文件, 优化编译时间

    本文围绕着实现EasyDSS高性能流媒体服务器的前端框架来展开的,具体EasyDSS的相关信息可在:www.easydss.com 找到! 接上回 <高性能流媒体服务器EasyDSS前端重构(一 ...

随机推荐

  1. js 获取 Url.Action 设置area

    var url = '@Url.Action("UserEdit","User",new { Area = "Setup", id = 1} ...

  2. javaEE环境搭建-eclipse

    1.       javaEE环境搭建: (1)     JDK1.8 (2)     eclipse-JavaEE (3)     tomcat-7.0.90 下载地址: https://tomca ...

  3. JavaScript各类型变量和对象

    一.javascript支持的数据类型: var x=1 数字 var x=0.1   小数 var x=true/false bool var x="abc"      字符串 ...

  4. C# 判断List集合中是否有重复的项

    /*在.Net 3.5 以上*/ ).Count() >= ;

  5. Spring学习笔记:Spring概述,第一个IoC依赖注入案例

    一.Spring的优点 企业及系统: 1.大规模:用户数量多.数据规模大.功能众多 2.性能和安全要求高 3.业务复杂 4.灵活应变 Java技术:高入侵式依赖EJB技术框架-->Spring框 ...

  6. 初学orcale(一)

    Oracle数据库学习: 01.数据库简介: (1)文件型数据库: Access Office组件: Foxpro (2)NoSql数据库(泛指非关系型数据库): NoSQL(NoSQL = Not ...

  7. java消息中间件 RocketMQ Linux安装与运行

    阿里巴巴宣布捐赠RocketMQ到Apache软件基金会孵化项目,最近闲下来便去部署了一个试验版本玩玩. 至于RockeMQ是什么,原理架构什么的这里就不赘述了,这里只记录安装过程. 一.系统环境 s ...

  8. mysql五:pymysql模块

    一.介绍 之前都是通过MySQ自带的命令行客户端工具Mysql来操作数据库,那如何在Python程序中操作数据库呢?这就需要用到pymysql模块了. 这个模块本质就是一个套接字客户端软件,使用前需要 ...

  9. JavaScript Callback 回调函数

    JavaScript callback回调函数 你到一个商店买东西,刚好你要的东西没有货,于是你在店员那里留下了你的电话,过了几天店里有货了,店员就打了你的电话,然后你接到电话后就到店里去取了货.在这 ...

  10. css rgba/hsla知识点讲解及半透明边框

    一.RGBA(R,G,B,A) 参数: R:红色值.正整数 | |百分数 G:绿色值.正整数 | |百分数 B:蓝色值.正整数 | |百分数 A:Alpha透明度.取值0~1之间. 说明:此色彩模式与 ...