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 相关文章推荐
JS IE和FF兼容性问题汇总
Feb 09 Javascript
js中将HTMLCollection/NodeList/伪数组转换成数组的代码
Jul 31 Javascript
js内置对象 学习笔记
Aug 01 Javascript
javascript读取Xml文件做一个二级联动菜单示例
Mar 17 Javascript
基于jquery步骤进度条源码分享
Nov 12 Javascript
Js与Jq获取浏览器和对象值的方法
Mar 18 Javascript
Angularjs 制作购物车功能实例代码
Sep 14 Javascript
javascript滚轮事件基础实例讲解(37)
Feb 14 Javascript
兼容浏览器的js事件绑定函数(详解)
May 09 Javascript
JavaScript常用数组操作方法,包含ES6方法
May 10 Javascript
解决Layui当中的导航条动态添加后渲染失败的问题
Sep 25 Javascript
vue 判断元素内容是否超过宽度的方式
Jul 29 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
比特率,大家看看这个就不用收音机音质去比MP3音质了
2021/03/01 无线电
PHP基于curl后台远程登录正方教务系统的方法
2016/10/14 PHP
javascript 四则运算精度修正函数代码
2010/05/31 Javascript
在JavaScript并非所有的一切都是对象
2013/04/11 Javascript
jQuery cdn使用介绍
2013/05/08 Javascript
js获取控件位置以及不同浏览器中的差别介绍
2013/08/08 Javascript
javascript动态的改变IFrame的高度实现自动伸展
2013/10/12 Javascript
jquery获取元素索引值index()示例
2014/02/13 Javascript
基于JS实现限时抢购倒计时间表代码
2017/05/09 Javascript
基于jQuery实现的单行公告活动轮播效果
2017/08/23 jQuery
React-Native使用Mobx实现购物车功能
2017/09/14 Javascript
VSCode配置react开发环境的步骤
2017/12/27 Javascript
微信小程序实现点击导航标签滚动定位到对应位置
2020/11/19 Javascript
Python 自动补全(vim)
2014/11/30 Python
简单介绍Python的Django框架的dj-scaffold项目
2015/05/30 Python
Python unittest模块用法实例分析
2018/05/25 Python
使用python对excle和json互相转换的示例
2018/10/23 Python
python使用Turtle库绘制动态钟表
2018/11/19 Python
Django中使用 Closure Table 储存无限分级数据
2019/06/06 Python
python设置环境变量的原因和方法
2019/06/24 Python
Django使用unittest模块进行单元测试过程解析
2019/08/02 Python
win10从零安装配置pytorch全过程图文详解
2020/05/08 Python
浅谈OpenCV中的新函数connectedComponentsWithStats用法
2020/07/05 Python
使用CSS媒体查询(Media Queries)和JavaScript判断浏览器设备类型的方法
2014/04/03 HTML / CSS
纯CSS3实现自定义Tooltip边框涂鸦风格的教程
2014/11/05 HTML / CSS
YSL圣罗兰美妆俄罗斯官网:Yves Saint Lauret RU
2020/09/23 全球购物
网络专业学生个人的自我评价
2013/12/16 职场文书
班长自荐书范文
2014/02/11 职场文书
小学班长竞选演讲稿
2014/04/24 职场文书
奥巴马开学演讲稿
2014/05/15 职场文书
施工员岗位职责范本
2015/04/11 职场文书
采购员工作总结范文
2015/08/12 职场文书
宪法宣传标语100条
2019/10/15 职场文书
浅谈Python响应式类库RxPy
2021/06/14 Python
js不常见操作运算符总结
2021/11/20 Javascript
win10输入法不见了只能打出字母怎么解决?
2022/08/05 数码科技