项目示例地址: 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. Mysql自动更新字段时间

    Mysql中更新某天数据可设置该条数据中的某个字段自动更新 ALTER TABLE `表名` MODIFY `字段名` TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON U ...

  2. django中自定义表名及字段名称

    在meta 类中指定表名,在字段中通过db_column指定列名如下所示 class Record(models.Model): content=models.CharField(max_length ...

  3. Redis过期设置

    Redis支持按key设置过期时间,过期后值将被删除(在客户端看来是补删除了的) 用TTL命令可以获取某个key值的过期时间(-1表示永不过期) 127.0.0.1:6379> set name ...

  4. SGI STL红黑树中迭代器的边界值分析

    前言 一段程序最容易出错的就是在判断或者是情况分类的边界地方,所以,应该对于许多判断或者是情况分类的边界要格外的注意.下面,就分析下STL中红黑树的迭代器的各种边界情况.(注意:分析中STL使用的版本 ...

  5. python 中函数

    函数   def 函数名(形参):形参不用在前面定义,局部变量   参数      必须参数            必须以正确的顺序传参      关键字参数        加入关键字后可以不需要正确 ...

  6. Android开发ListView嵌套ImageView实现单选按钮

    做Android开发两年的时间,技术稍稍有一些提升,刚好把自己实现的功能写出来,记录一下,如果能帮助到同行的其他人,我也算是做了件好事,哈哈!!废话不多说,先上个图. 先上一段代码: if (last ...

  7. Vue表格中,对数据进行转换、处理

    众所周知,后端从Mysql取出的数据,一般是很难单独处理某一个Key的数据的(需要处理的话,可能会浪费大量的性能.而且对页面加载时间有很大的影响),所以,从数据库取出的数据.只能由前端进行处理.但是在 ...

  8. 使用angular帮你实现拖拽

    拖拽有多种写法,在这里就看一看angular版的拖拽. <!DOCTYPE html> <html ng-app="myApp"> <head> ...

  9. AS打包出现app:transformClassesAndResourcesWithProguardForRelease错误

    今天打包项目的正式签名APK出现以下错误,当时挺着急用的实在没办法就只能用测试apk凑合来对付一下了 Error:Execution failed for task ':app:transformCl ...

  10. 【Linux】Windows与Linux之间的文件共享(基于网络)

    切记:Linux的安全机制的存在--iptables和selinux. 一.操作前提 1.1 从Windows能够ping通Linux 1.2 关闭Linux防火墙 command1:/etc/ini ...