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+CSS 半开折叠效果原理及代码(自写)
Mar 04 Javascript
AngularJS实现表单手动验证和表单自动验证
Dec 09 Javascript
jQuery实现的鼠标经过时变宽的效果(附demo源码)
Apr 28 Javascript
JavaScript动态添加css样式和script标签
Jul 19 Javascript
jQuery实现日期联动效果实例
Jul 26 Javascript
Bootstrap分页插件之Bootstrap Paginator实例详解
Oct 15 Javascript
vuejs通过filterBy、orderBy实现搜索筛选、降序排序数据
Oct 26 Javascript
javascript 实现文本使用省略号替代(超出固定高度的情况)
Feb 21 Javascript
详解使用Vue Router导航钩子与Vuex来实现后退状态保存
Sep 11 Javascript
echarts学习笔记之图表自适应问题详解
Nov 22 Javascript
JavaScript实现职责链模式概述
Jan 25 Javascript
ES6入门教程之let、const的使用方法
Apr 13 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
帅气的琦玉老师
2020/03/02 日漫
PHP 日期时间函数的高级应用技巧
2009/10/10 PHP
PHP array操作10个小技巧分享
2011/06/23 PHP
微信自定义菜单的创建/查询/取消php示例代码
2016/08/05 PHP
Phpstorm+Xdebug断点调试PHP的方法
2018/05/14 PHP
提高网站信任度的技巧
2008/10/17 Javascript
JavaScript中textRange对象使用方法小结
2015/03/24 Javascript
jQuery控制Div拖拽效果完整实例分析
2015/04/15 Javascript
JavaScript的jQuery库中ready方法的学习教程
2015/08/14 Javascript
jquery衣服颜色选取插件效果代码分享
2015/08/28 Javascript
BootstrapTable与KnockoutJS相结合实现增删改查功能【二】
2016/05/10 Javascript
由简入繁实现Jquery树状结构的方法(推荐)
2016/06/10 Javascript
js控制一个按钮是否可点击(可使用)disabled的实例
2017/02/14 Javascript
史上最全JavaScript数组去重的十种方法(推荐)
2017/08/17 Javascript
jQuery实现用户信息表格的添加和删除功能
2017/09/12 jQuery
微信小程序loading组件显示载入动画用法示例【附源码下载】
2017/12/09 Javascript
angularjs通过过滤器返回超链接的方法
2018/10/26 Javascript
Makefile/cmake/node-gyp中区分判断不同平台的方法
2018/12/18 Javascript
[03:36]2015国际邀请赛第二日现场精彩集锦
2015/08/06 DOTA
Python简单实现控制电脑的方法
2018/01/22 Python
使用Python读取二进制文件的实例讲解
2018/07/09 Python
Python读取txt内容写入xls格式excel中的方法
2018/10/11 Python
Django web框架使用url path name详解
2019/04/29 Python
利用python计算时间差(返回天数)
2019/09/07 Python
python使用beautifulsoup4爬取酷狗音乐代码实例
2019/12/04 Python
谈一谈数组拼接tf.concat()和np.concatenate()的区别
2020/02/07 Python
在python tkinter界面中添加按钮的实例
2020/03/04 Python
Win10用vscode打开anaconda环境中的python出错问题的解决
2020/05/25 Python
Python同时迭代多个序列的方法
2020/07/28 Python
推荐WEB开发者最佳HTML5和CSS3代码生成器
2015/11/24 HTML / CSS
HTML5 canvas实现移动端上传头像拖拽裁剪效果
2016/03/14 HTML / CSS
2015年百日安全活动总结
2015/03/26 职场文书
办公室日常管理制度
2015/08/04 职场文书
2016习总书记系列重要讲话心得体会
2016/01/15 职场文书
django中websocket的具体使用
2022/01/22 Python
SQL Server中的游标介绍
2022/05/20 SQL Server