新版vue-cli搭建多页面应用
2019独角兽企业重金招聘Python工程师标准>>>
折腾了好久,终于把坑踩完了,废话不多说,上教程~
github地址:https://github.com/guolihuaGitHub/vue-cli-multipage
另外推荐一下我另一篇博客,我觉得这篇好用,附上地址https://my.oschina.net/u/3219445/blog/1596818
src目录下的文件其实都可以删完,没什么卵用,然后新建一个文件夹,module
module下的文件形式,下面的index是入口页面
detail跟index的目录结构一样,是两个单页面,复制修改一下文件名即可
文件结构搭建完毕,下面修改配置文件。
首先工具函数添加以下代码
const glob = require('glob')
exports.getEntry = function (globPath) {let entries = {},basename, tmp, pathname;if (typeof (globPath) != "object") {globPath = [globPath]}globPath.forEach((itemPath) => {glob.sync(itemPath).forEach(function (entry) {basename = path.basename(entry, path.extname(entry));if (entry.split('/').length > 4) {tmp = entry.split('/').splice(-3);pathname = tmp.splice(0, 1) + '/' + basename; // 正确输出js和html的路径entries[pathname] = entry;} else {entries[basename] = entry;}});});// console.log(entries)return entries; }
接着修改webpack.base.conf.js
添加
const entries = utils.getEntry(['./src/module/*.js', './src/module/**/*.js']) // 获得入口js文件
修改入口文件
在修改webpack.dev.conf.js
注释以下代码
因为下面要修改devWebpackConfig这个变量,所以将其定义方式改为let
然后添加添加以下代码
const pages = utils.getEntry(['./src/module/*.html','./src/module/**/*.html']) for (let pathname in pages) {// 配置生成的html文件,定义路径等let conf = {filename: pathname + '.html',template: pages[pathname], // 模板路径inject: true, // js插入位置// necessary to consistently work with multiple chunks via CommonsChunkPluginchunksSortMode: 'dependency'// chunks: ['manifest', 'vendor', pathname],// hash: true};if (pathname in baseWebpackConfig.entry) {conf.chunks = ['manifest', 'vendor', pathname]conf.hash = true}devWebpackConfig.plugins.push(new HtmlWebpackPlugin(conf)) }
最后修改webpack.prod.conf.js文件
注释这段代码
添加以下代码
const pages = utils.getEntry(['./src/module/*.html','./src/module/**/*.html']) for (let pathname in pages) {// 配置生成的html文件,定义路径等let conf = {filename: pathname + '.html',template: pages[pathname], // 模板路径inject: true, // js插入位置// necessary to consistently work with multiple chunks via CommonsChunkPluginchunksSortMode: 'dependency'};if (pathname in module.exports.entry) {conf.chunks = ['manifest', 'vendor', pathname]conf.hash = true}module.exports.plugins.push(new HtmlWebpackPlugin(conf)) }
到此多页面配置完成。
转载于:https://my.oschina.net/u/3219445/blog/1588294
新版vue-cli搭建多页面应用相关推荐
- vue = 什么意思_记录使用@vue/cli搭建Vue3项目完整流程
最近发现vue两大UI框架Element UI和Ant Design Vue都已经支持Vue3了,如果再不学习Vue3就落伍了,此文章记录下使用@vue/cli搭建Vue3项目完整流程. 1 安装vu ...
- cli vue 卸载_记录使用@vue/cli搭建Vue3项目完整流程
最近发现vue两大UI框架Element UI和Ant Design Vue都已经支持Vue3了,如果再不学习Vue3就落伍了,此文章记录下使用@vue/cli搭建Vue3项目完整流程. 1 安装vu ...
- 怎么把HTML网页重构为VUE,基于vue cli重构多页面脚手架过程详解
官方提供的项目生成工具vue-cli没有对多页面webApp的支持,但是在实际的项目中,我们需要这样的脚手架,参考了很多大牛的方法,这里提供了一种我的单页面脚手架转换为多页面脚手架的方案,供大家参考. ...
- VSCode 搭建Vue开发环境之Vue CLI
2019独角兽企业重金招聘Python工程师标准>>> 一.简介说明 1.关于VS Code开发工具,安装和配置,更多可以参考以前文章 2.关于Vue.js,Vue是一个优秀的渐进式 ...
- Vue学习笔记(九) Vue CLI
1.简介 Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统,它包括三个独立的部分: CLI:一个全局安装的 npm 包,提供在终端里使用的命令 CLI 服务:一个局部安装在使用了 @v ...
- vue cli 4 多环境_Vue 笔记整理19
19.1 vue-cli起步 19.1.1 什么是vue-cli Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统,提供: - 通过 @vue/cli 搭建交互式的项目脚手架. - 通 ...
- Vue 项目搭建流程和使用大全
Vue 项目搭建流程及项目中遇到的问题 项目搭建流程 1.使用vue cli 搭建项目框架 cnpm install -g vue-cli 安装vue cli 脚手架 vue init webpack ...
- vue cli项目升级--vue cli3升级到vue cli4
原文网址:vue cli项目升级--vue cli3升级到vue cli4_IT利刃出鞘的博客-CSDN博客 简介 说明 本文介绍如何升级vue项目的vue cli版本. 官方网址 https://c ...
- Vue CLI 3 多页应用项目的搭建
在项目初期时,从零开始搭建和配置本地前端开发环境是一项很繁琐的工作,需要考虑到项目目录结构.项目基本配置.Webpack 配置等等.通过 Vue CLI 3 可以快速的生成一个项目,这样我们就可以专注 ...
- elementui 搭建布局页面路由_【项目实践】使用Vue.js和ElementUI快速实现后台管理系统的界面布局...
前言 大家都知道,后台管理界面不需要很酷炫的动画效果,也不需要花里胡哨的界面布局,只需要简洁易用.清爽明了的界面以便于管理数据.而现在普遍的后台管理系统的界面布局都差不多,上中下结构,然后左边是导航栏 ...
最新文章
- R语言ggplot2可视化箱图(boxplot)并使用ggsignif添加分组显著性(significance)标签
- 20130710--代码技巧
- zedboard:使用ISE和modelsim搭建仿真环境
- mySQL(关系型数据库管理系统)编辑
- Java并行任务框架Fork/Join
- word2003设置页码不从第一页开始的方法
- html动态散花代码,IOS实现签到特效(散花效果)的实例代码
- 2018年最实用机器学习项目Top 6(附开源链接)
- ASP.Net学习笔记011--ASP.Net揭秘之div版本自增
- 学生成绩abcde怎样划分_同等教育下,学生成绩差距较大,怎样避免学习中的“马太效应”?...
- SQLServer数据库字典维护方法
- IIS无法启动,提示另外一个程序正在使用此文件
- linux安装富士施乐打印机驱动下载,Ubuntu 8.04下安装Xerox打印机记录
- 最详细的黑苹果安装教程,教你如何安装黑苹果?
- 桌面计算机恢复出厂设置,电脑桌面恢复出厂设置
- go import用法
- 书摘---创业36条军规4:如何组建公司
- 如何看待人工智能威胁论?
- Python解释器及IDLE的使用
- 总裁演说思维:商务谈判最经典的12个技巧
热门文章
- BugkuCTF-WEB题网站被黑
- html5 判断分享,好程序员HTML5大前端分享之函数篇
- 幼儿园计算机课程名称,幼儿园课程建设30:计算机与幼儿园课程的整合(3)
- 顺时针小球圆周运动Java编程_如何使用CSS实现圆周运动小球的实例
- java中如何实现变量可配置_Java基础-如何配置环境变量
- matlab中的terminator模块,2.2 Ground 及 Terminator模块
- android设置输入框输入字符限制,Android EditText限制输入字符的方法总结
- linux头文件怎么编译,microsoft编译器怎么使用Linux头文件
- Jackson序列化实例
- (二)双线性插值python实现