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

项目运行:

  1. 下载项目之后
  2.  
  3. # 下载依赖
  4. npm install
  5.  
  6. # 运行
  7. npm run dev
  8.  
  9. http://localhost:3000/login.html
  10. http://localhost:3000/index.html

一、开发环境

node v6.11.0

二、安装vue-cli脚手架

  1. npm install vue-cli@2.8.2 -g

三、初始化项目

  1. vue init webpack webpack-multipage // 创建项目
  2.  
  3. cd webpack-multipage // 进入webpack-multipage目录
  4.  
  5. npm install // 下载依赖
  6.  
  7. npm run dev // 运行

http://localhost:8080

四、修改配置支持多页面

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

  1. |-- src
  2. |-- assets
  3. |-- components
  4. |-- entry
  5. |-- index // index模块
  6. |-- components
  7. |-- Hello.vue
  8. |-- router
  9. |-- index.js
  10. |-- index.html
  11. |-- index.js
  12. |-- index.vue
  13. |-- login // login模块
  14. |-- login.html
  15. |-- login.js
  16. |-- login.vue

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

  1. # 先下载glob组件
  2. npm install glob -D

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

  1. var glob = require('glob');
  2. exports.getEntries = function (globPath) {
  3. var entries = {}
  4. glob.sync(globPath).forEach(function (entry) {
  5. var basename = path.basename(entry, path.extname(entry), 'router.js');
  6. entries[basename] = entry
  7. });
  8. return entries;
  9. }

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

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

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

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

  1. ...
  2. // https://github.com/ampedandwired/html-webpack-plugin
  3. new HtmlWebpackPlugin({
  4. filename: 'index.html',
  5. template: 'index.html',
  6. inject: true
  7. }),
  8. ...

在文件最后添加

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

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

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

  1. ...
  2. // generate dist index.html with correct asset hash for caching.
  3. // you can customize output by editing /index.html
  4. // see https://github.com/ampedandwired/html-webpack-plugin
  5. new HtmlWebpackPlugin({
  6. filename: config.build.index,
  7. template: 'index.html',
  8. inject: true,
  9. minify: {
  10. removeComments: true,
  11. collapseWhitespace: true,
  12. removeAttributeQuotes: true
  13. // more options:
  14. // https://github.com/kangax/html-minifier#options-quick-reference
  15. },
  16. // necessary to consistently work with multiple chunks via CommonsChunkPlugin
  17. chunksSortMode: 'dependency'
  18. }),
  19. ...

在文件最后添加

  1. var pages = utils.getEntries('./src/entry/*/*.html')
  2. for(var page in pages) {
  3. // 配置生成的html文件,定义路径等
  4. var conf = {
  5. filename: page + '.html',
  6. template: pages[page], //模板路径
  7. inject: true,
  8. // excludeChunks 允许跳过某些chunks, 而chunks告诉插件要引用entry里面的哪几个入口
  9. // 如何更好的理解这块呢?举个例子:比如本demo中包含两个模块(index和about),最好的当然是各个模块引入自己所需的js,
  10. // 而不是每个页面都引入所有的js,你可以把下面这个excludeChunks去掉,然后npm run build,然后看编译出来的index.html和about.html就知道了
  11. // filter:将数据过滤,然后返回符合要求的数据,Object.keys是获取JSON对象中的每个key
  12. excludeChunks: Object.keys(pages).filter(item => {
  13. return (item != page)
  14. }),
  15. minify: {
  16. removeComments: true,
  17. collapseWhitespace: true,
  18. removeAttributeQuotes: true
  19. // more options:
  20. // https://github.com/kangax/html-minifier#options-quick-reference
  21. },
  22. // necessary to consistently work with multiple chunks via CommonsChunkPlugin
  23. chunksSortMode: 'dependency'
  24. }
  25. // 需要生成几个html文件,就配置几个HtmlWebpackPlugin对象
  26. module.exports.plugins.push(new HtmlWebpackPlugin(conf))
  27. }

(5)修改config/index.js

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

五、建立页面

index/index.html

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>index</title>
  6. </head>
  7. <body>
  8. <div id="app"></div>
  9. </body>
  10. </html>

index/index.js

  1. import Vue from 'vue'
  2. import IndexView from './index.vue'
  3. import router from './router'
  4.  
  5. // import VueResource from 'vue-resource'; // 使用前先npm install vue-resource --save下载vue-resource
  6. // Vue.use(VueResource);
  7.  
  8. new Vue({
  9. el: '#app',
  10. router,
  11. render: h => h(IndexView)
  12. });

index/index.vue

  1. <template>
  2. <div>
  3. <router-view></router-view>
  4. </div>
  5. </template>
  6.  
  7. <script>
  8. export default {
  9. }
  10. </script>
  11.  
  12. <style>
  13. </style>

index/router/index.js

  1. import Vue from 'vue'
  2. import Router from 'vue-router'
  3. import Hello from '../components/Hello.vue'
  4.  
  5. Vue.use(Router);
  6.  
  7. export default new Router({
  8. routes: [
  9. {
  10. path: '/',
  11. name: 'Hello',
  12. component: Hello
  13. }
  14. ]
  15. })

index/components/Hello.vue

  1. <template>
  2. <div>
  3. Hello {{ name }}
  4. </div>
  5. </template>
  6.  
  7. <script>
  8. export default {
  9. data(){
  10. return {
  11. name: "admin"
  12. }
  13. },
  14. mounted(){
  15. //this.$http.get("/demo/api/userinfo").then(resp =>{
  16. // this.name = resp.data.data;
  17. //});
  18. }
  19. }
  20. </script>
  21.  
  22. <style>
  23. </style>

login/login.html

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>login</title>
  6. </head>
  7. <body>
  8. <div id="app"></div>
  9. </body>
  10. </html>

login/login.js

  1. import Vue from 'vue'
  2. import LoginView from './login.vue'
  3.  
  4. // import VueResource from 'vue-resource';
  5. // Vue.use(VueResource);
  6.  
  7. new Vue({
  8. el: '#app',
  9. render: h => h(LoginView)
  10. })

login/login.vue

  1. <template>
  2. <div>
  3. <form id="login-form">
  4. <label for="username">用户名:</label>
  5. <input type="text" id="username" name="username">
  6.  
  7. <br>
  8.  
  9. <label for="password">密码:</label>
  10. <input type="password" id="password" name="password"><br>
  11.  
  12. <br>
  13.  
  14. <button @click.prevent="submit">登录</button>
  15. </form>
  16. </div>
  17. </template>
  18.  
  19. <script>
  20. export default {
  21. methods:{
  22. submit(){
  23. window.location = "/demo/index.html";
  24. //let formData = new FormData(document.getElementById("login-form"));
  25.  
  26. //this.$http.post("/demo/api/login", formData).then(resp => {
  27. // if (resp.data.status === 200){
  28. // window.location = "/index.html";
  29. // }else {
  30. // alert(resp.data.desc);
  31. // }
  32. //})
  33. }
  34. }
  35. }
  36. </script>
  37.  
  38. <style>
  39. </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. HZAU 18——Array C——————【贪心】

    18: Array C Time Limit: 1 Sec  Memory Limit: 128 MBSubmit: 586  Solved: 104[Submit][Status][Web Boar ...

  2. 省市区json数据

    window.LocalList = [ { region:{ name:'北京市', code:'11', state:[ { name:'北京', code:'01', city:[ {name: ...

  3. 【转】常用的邮箱服务器(SMTP、POP3)地址、端口

    gmail(google.com)POP3服务器地址:pop.gmail.com(SSL启用 端口:995)SMTP服务器地址:smtp.gmail.com(SSL启用 端口:587) 21cn.co ...

  4. [转]jQuery Validate使用说明

    本文转自:http://www.cnblogs.com/gimin/p/4757064.html jQuery Validate 导入 js 库 <script src="./jque ...

  5. [转]Session and application state in ASP.NET Core

    本文转自:https://docs.microsoft.com/en-us/aspnet/core/fundamentals/app-state By Rick Anderson and Steve ...

  6. Aspose.Words .NET如何实现文档合并的同页分页显示

    当我们需要将一个文档添加到另一个文档时,经常会有不同的显示需求.为了文档的流畅,我们需要源文档和目标文档在内容上实现连续显示:而为了更好地区分文档,我们经常会希望两个文档的合并实现分页显示. 下面,就 ...

  7. Java 获取当前时间距离当天凌晨的秒数

    原文出自:https://blog.csdn.net/seesun2012 在前期项目中遇到一个客户端与服务器间的时间同步问题,需要获取到当前时间与当天凌晨时间距离的秒数,写这篇文章主要是为了总结一下 ...

  8. 详解 UWP (通用 Windows 平台) 中的两种 HttpClient API

    UWP (通用 Windows 平台) 应用开发者在构建通过 HTTP 与 Web 服务或服务器断点交互的应用时,有多种 API 可以选择.要在一个托管 UWP 应用中实现 HTTP 客户端角色,最常 ...

  9. python unix时间戳

    这是第一次用着python感到怒了,从datetime转化到timestamp数值居然没有直接的函数 直接获取当前时间戳倒是方便: import time timestamp = time.time( ...

  10. Centos6配置samba服务器并批量添加用户和文件夹

    一.需求 局域网内有若干用户,所有用户访问一个共享目录 每个用户在共享目录里有自己的文件夹 每个用户都可以读取其他人的文件夹 每个用户只能对自己的文件夹有写入权限 所有用户都属于filesgroup组 ...