Vue-cli创建项目从单页面到多页面的方法


Posted in Javascript onSeptember 20, 2017

对于某些项目来说,单页面不能很好的满足需求,所以需要将vue-cli创建的单页面项目改为多页面项目。

需要修改以下几个文件:

1、下载依赖glob

$npm install glob --save-dev

2、修改build下的文件

(1)修改webpack.base.conf.js

添加以下代码:

var glob = require('glob');
var entries = getEntry('./src/pages/**/*.js')

将module.exports中的

entry: {
   app: './src/main.js'
  },

注释掉,然后添加这一行代码:

entry: entries,

至于entries是什么,别急呀,看下面:

添加一个方法:

//获取入口js文件
function getEntry(globPath) {
 var entries = {},
  basename, tmp, pathname;

 glob.sync(globPath).forEach(function (entry) {
  basename = path.basename(entry, path.extname(entry));
  pathname = basename.split("_")[0]; //index_main.js得到index
  entries[pathname] = entry;
 });
 return entries;
}

这个文件修改成这样子就可以了。

(2)修改webpack.dev.conf.js

添加以下代码:

//引入
var glob = require('glob')
var path = require('path')

将module.exports中的plugins里的

new HtmlWebpackPlugin({
  filename: 'index.html',
  template: 'index.html',
  inject: true
}),

注释掉,然后添加以下代码:

function getEntry(globPath) {
 
 var entries = {},basename;

 glob.sync(globPath).forEach(function (entry) {
  basename = path.basename(entry, path.extname(entry));
  entries[basename] = entry;
 });
 return entries;
}

var pages = getEntry('src/pages/**/*.html');

for (var pathname in pages) {
 // 配置生成的html文件,定义路径等
 var conf = {
  filename: pathname + '.html',
  template: pages[pathname],  // 模板路径
  inject: true,       // js插入位置
  chunks:[pathname]
 };
 module.exports.plugins.push(new HtmlWebpackPlugin(conf));
}

这个文件修改到此就可以了。

(3)webpack.prod.conf.js

这个文件修改的套路与上一个文件类似
 添加以下代码: var glob = require('glob') 因为项目在创建时,生成项目的时候是直接将可选的所有依赖都选择了yes,所以项目中的env的声明定义如下:

var env = process.env.NODE_ENV === 'testing ? require('../config/test.env') : config.build.env ;

但是由于webpack.test.conf.js文件目前还没有进行修改,所以需要把这行声明换成下面这行:

var env = config.build.env

将webpackConfig中的plugins里的

new HtmlWebpackPlugin({
  filename: config.build.index,
  template: 'index.html',
  inject: true,
  minify: {
   removeComments: true,
   collapseWhitespace: true,
   removeAttributeQuotes: true
  },
  chunksSortMode: 'dependency'
}),

注释掉,在声明定义webpackConfig的后面添加以下代码:

function getEntry(globPath) {
 var entries = {},
  basename;
 glob.sync(globPath).forEach(function (entry) {
  basename = path.basename(entry, path.extname(entry));
  entries[basename] = entry;
 });
 return entries;
}

var pages = getEntry('src/pages/**/*.html');

for (var pathname in pages) {
 var conf = {
   filename: process.env.NODE_ENV === 'testing'
    ? pathname + '.html'
    : config.build[pathname],
   template: pages[pathname],
   inject: true,
   minify: {
    removeComments: true,
    collapseWhitespace: true,
    removeAttributeQuotes: true
   },
   chunks:[pathname]
  }
 webpackConfig.plugins.push(new HtmlWebpackPlugin(conf));
}

此时,这个文件也修改好了。

3、修改config下的文件

这个文件夹下,只需要修改一个文件:index.js 这个文件的作用是,寻找文件路径,然后根据这个文件设置的目录层级,生成打包后的文件以及相应的层级文件结构。 添加以下代码:

var build = {
 env: require('./prod.env'),
 assetsRoot: path.resolve(__dirname, '../dist'),
 assetsSubDirectory: 'static',
 assetsPublicPath: '/',
 productionSourceMap: true,
 productionGzip: false,
 productionGzipExtensions: ['js', 'css']
}

function getEntry(globPath) {
 var entries = {},basename;

 glob.sync(globPath).forEach(function(entry) {
  basename = path.basename(entry, path.extname(entry));
  entries[basename] = entry;
 });
 return entries;
}

var pages = getEntry('src/pages/**/*.html');
 
//入口 index: path.resolve(__dirname, '../dist/index.html')
for (var pathname in pages) {
 build[pathname] = path.resolve(__dirname, '../dist/' + pathname + '.html')
}

然后将module.exports中的build的值换成我们刚刚添加声明的变量build。 如果希望修改打包后的目层级结构,可以在build中修改;还可以在build中增加我们需要定义的变量,比如我们需要将fabfile.py和favicon.ico拷贝到dist目录下的a目录下,就可以在build中定义一个属性,

distA:path.resolve(__dirname, '../dist/a),

然后因为在webpack.prod.conf.js中已经引入了'copy-webpack-plugin'(var CopyWebpackPlugin = require('copy-webpack-plugin')),我们就可以在 webpackConfig.plugins下添加如下代码:

new CopyWebpackPlugin([
  {
   from: path.resolve(__dirname, '../fabfile.py'),
   to: config.build.distA,
   template: 'fabfile.py'
  }
 ])
new CopyWebpackPlugin([
  {
   from: path.resolve(__dirname, '../favicon.ico'),
   to: config.build.distA,
   template: 'favicon.ico'
  }
 ])

在src目录下添加pages文件夹

目录的层级结构安排成类似于这种形式:

Vue-cli创建项目从单页面到多页面的方法

5、打包

做完以上修改,虽然本地运行没有问题,但是打包后,还是会有问题,会出现报错:webpackJsonp is not defined
解决方式如下: 在webpack.prod.conf.js文件下的for (var pathname in pages)循环中定义的conf里,添加两行代码:

chunksSortMode: 'dependency', // dependency 页面中引入的js按照依赖关系排序;manual 页面中引入的js按照下面的chunks的数组中的顺序排序;

chunks: ['manifest', 'vender', pathname] // 生成的页面中引入的js,'manifest', 'vender'这两个js是webpack在打包过程中抽取出的一些公共方法依赖,其中,'manifest'又是从'vender'中抽取得到的,所以这三个js文件的依赖关系是 pathname依赖 'vender','vender'依赖'manifest'.

综上,就是本次项目从单页面到多页面项目的转变历程,关于webpack.test.conf.js文件的修改,后续修改成功后,会继续补充添加。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
基于Jquery的实现回车键Enter切换焦点
Sep 14 Javascript
jquery mobile实现拨打电话功能的几种方法
Aug 05 Javascript
js获取时间并实现字符串和时间戳之间的转换
Jan 05 Javascript
JavaScript获取URL中参数querystring的方法详解
Oct 11 Javascript
浅谈angular2的http请求返回结果的subcribe注意事项
Mar 01 Javascript
Angular搜索 过滤 批量删除 添加 表单验证功能集锦(实例代码)
Oct 25 Javascript
使用vue的v-for生成table并给table加上序号的实例代码
Oct 27 Javascript
koa2 用户注册、登录校验与加盐加密的实现方法
Jul 22 Javascript
Egg Vue SSR 服务端渲染数据请求与asyncData
Nov 24 Javascript
Vue-cli3多页面配置详解
Mar 22 Javascript
理解Proxy及使用Proxy实现vue数据双向绑定操作
Jul 18 Javascript
利用promise及参数解构封装ajax请求的方法
Mar 24 Javascript
JS简单实现父子窗口传值功能示例【未使用iframe框架】
Sep 20 #Javascript
vue学习笔记之v-if和v-show的区别
Sep 20 #Javascript
jQuery实现可兼容IE6的淡入淡出效果告警提示功能示例
Sep 20 #jQuery
解决vue.js在编写过程中出现空格不规范报错的问题
Sep 20 #Javascript
PHP 实现一种多文件上传的方法
Sep 20 #Javascript
使用原生js+canvas实现模拟心电图的实例
Sep 20 #Javascript
Vue.js项目模板搭建图文教程
Sep 20 #Javascript
You might like
整理的一些实用WordPress后台MySQL操作命令
2013/01/07 PHP
Yii2分页的使用及其扩展方法详解
2016/05/23 PHP
PHP 实现浏览记录并按日期分组
2017/05/11 PHP
javascript学习笔记(十三) js闭包介绍(转)
2012/06/20 Javascript
js处理json以及字符串的比较等常用操作
2013/09/08 Javascript
javascript 函数声明与函数表达式的区别介绍
2013/10/05 Javascript
Javascript弹出窗口的各种方法总结
2013/11/11 Javascript
jQuery简单实现验证邮箱格式
2015/07/15 Javascript
jquery实现的横向二级导航效果代码
2015/08/26 Javascript
Windows下用PyCharm和Visual Studio开始Python编程
2015/10/26 Javascript
js面向对象之常见创建对象的几种方式(工厂模式、构造函数模式、原型模式)
2015/11/09 Javascript
Bootstrap CDN和本地化环境搭建
2016/10/26 Javascript
解析微信JS-SDK配置授权,实现分享接口
2016/12/09 Javascript
Vue2组件tree实现无限级树形菜单
2017/03/29 Javascript
防止页面url缓存中ajax中post请求的处理方法
2017/10/10 Javascript
JS实现的ajax和同源策略(实例讲解)
2017/12/01 Javascript
关于vue面试题汇总
2018/03/20 Javascript
jQuery滑动效果实现方法分析
2018/09/05 jQuery
vue打开新窗口并实现传参的图文实例
2021/03/04 Vue.js
基于python的Tkinter实现一个简易计算器
2015/12/31 Python
对python制作自己的数据集实例讲解
2018/12/12 Python
详解python中的线程与线程池
2019/05/10 Python
Python+OpenCV图像处理——打印图片属性、设置存储路径、调用摄像头
2020/10/22 Python
香港连卡佛百货官网:Lane Crawford
2019/09/04 全球购物
Linux的文件类型
2012/03/07 面试题
教师实习期自我鉴定
2013/10/06 职场文书
市场安全管理制度
2014/01/26 职场文书
数控专业个人求职信范文
2014/02/05 职场文书
开服装店计划书
2014/08/15 职场文书
十佳青年事迹材料
2014/08/21 职场文书
色戒观后感
2015/06/12 职场文书
卖车协议书范文
2016/03/23 职场文书
导游词之丽江普济寺
2019/10/22 职场文书
python数据库批量插入数据的实现(executemany的使用)
2021/04/30 Python
python本地文件服务器实例教程
2021/05/02 Python
永中文档在线转换预览基于nginx配置部署方案
2022/06/10 Servers