vue-cli单页应用改成多页应用配置详解


Posted in Javascript onJuly 14, 2017

前言

从接触vue开始用的是vue-cli直接搭建单页应用,参考配合着vue-router开发起来简直爽到吊炸天,但是由于项目越来越复杂了,单页用起来可能有点力不从心,能不能弄成多页面呢,查了相关资料得到的结论是完全可以的,能多页面多入口,并且可以使用组件,还引入jQuery,这简直完美了,这个demo是从我已经改造完成的项目中摘出来的,现在演示下怎么把基于vue2的vue-cli单页模板改造成多页面,并且多入口的项目。

技术栈

  1. vue: 2.0.1
  2. vue-resource:1.0.3
  3. vue-router:2.0.0
  4. webpack:1.13.2
  5. gulp:3.9.1
  6. ES6

运行

git clone https://github.com/dawnyu/vue-cli-multipage.git
npm install 
npm run build
npm run dev

改造后的目录

vue-cli单页应用改成多页应用配置详解

可以多目录生成目标文件

公共的js和样式图标放到assets文件夹即可

修改点

build/utils.js

var path = require('path')
var config = require('../config')
var glob = require('glob')
 // 将样式提取到单独的css文件中,而不是打包到js文件或使用style标签插入在head标签中
var ExtractTextPlugin = require('extract-text-webpack-plugin')

exports.assetsPath = function(_path) {
 var assetsSubDirectory = process.env.NODE_ENV === 'production' ?
 config.build.assetsSubDirectory :
 config.dev.assetsSubDirectory
 return path.posix.join(assetsSubDirectory, _path)
}

exports.cssLoaders = function(options) {
 options = options || {}
 // generate loader string to be used with extract text plugin
 function generateLoaders(loaders) {
 var sourceLoader = loaders.map(function(loader) {
  var extraParamChar
  if (/\?/.test(loader)) {
  loader = loader.replace(/\?/, '-loader?')
  extraParamChar = '&'
  } else {
  loader = loader + '-loader'
  extraParamChar = '?'
  }
  return loader + (options.sourceMap ? extraParamChar + 'sourceMap' : '')
 }).join('!')

 if (options.extract) {
  return ExtractTextPlugin.extract('vue-style-loader', sourceLoader)
 } else {
  return ['vue-style-loader', sourceLoader].join('!')
 }
 }

 // http://vuejs.github.io/vue-loader/configurations/extract-css.html
 return {
 css: generateLoaders(['css']),
 postcss: generateLoaders(['css']),
 less: generateLoaders(['css', 'less']),
 sass: generateLoaders(['css', 'sass?indentedSyntax']),
 scss: generateLoaders(['css', 'sass']),
 stylus: generateLoaders(['css', 'stylus']),
 styl: generateLoaders(['css', 'stylus'])
 }
}

// Generate loaders for standalone style files (outside of .vue)
exports.styleLoaders = function(options) {
 var output = []
 var loaders = exports.cssLoaders(options)
 for (var extension in loaders) {
 var loader = loaders[extension]
 output.push({
  test: new RegExp('\\.' + extension + '$'),
  loader: loader
 })
 }
 return output
}
//增加获取多入口的方法 注意 这个参数是个数组
exports.getEntry = function(globPaths) {
 var entries = {},
 basename, tmp, pathname;
 for (globPath of globPaths) {
 glob.sync(globPath).forEach(function(entry) {
  basename = path.basename(entry, path.extname(entry));
  tmp = entry.split('/').splice(-3);
  pathname = tmp.splice(0, 1) + '/' + basename; // 正确输出js和html的路径
  entries[pathname] = entry;
 });
 }
 console.log(entries);
 return entries;
}

webpack.base.conf.js

var path = require('path')
var config = require('../config')
var webpack = require('webpack')
var merge = require('webpack-merge')
var utils = require('./utils')
var projectRoot = path.resolve(__dirname, '../') ///——driname当前目录
var chunks = Object.keys(utils.getEntry(['./src/module/**/*.js', './src/m/**/*.js']));
// 将样式提取到单独的css文件中,而不是打包到js文件或使用style标签插入在head标签中
var ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = {
 entry: utils.getEntry(['./src/module/**/*.js', './src/m/**/*.js']),//传入需要打包的入口,我这里是pc端和手机端入口打到一个包里
 output: {
 path: config.build.assetsRoot,
 publicPath: process.env.NODE_ENV === 'production' ? config.build.assetsPublicPath : config.dev.assetsPublicPath, //根名称可配置
 filename: '[name].js'
 },
 resolve: {
 extensions: ['', '.js', '.vue'],
 fallback: [path.join(__dirname, '../node_modules')],
 alias: {
  'src': path.resolve(__dirname, '../src'),
  'assets': path.resolve(__dirname, '../src/assets'),
  'components': path.resolve(__dirname, '../src/components'),
  'jquery': 'jquery'
 }
 },
 resolveLoader: {
 fallback: [path.join(__dirname, '../node_modules')]
 },
 module: {
 loaders: [{
  test: /\.vue$/,
  loader: 'vue-loader'
  },
  {
  test: /\.js$/,
  loader: 'babel',
  include: projectRoot,
  exclude: /node_modules/
  },
  {
  test: /\.json$/,
  loader: 'json'
  },
  {
  test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
  loader: 'url',
  query: {
   limit: 30000,
   name: utils.assetsPath('img/[name].[hash:7].[ext]')
  }
  },
  {
  test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
  loader: 'url',
  query: {
   limit: 10000,
   name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
  }
  }
 ]
 },
 eslint: {
 formatter: require('eslint-friendly-formatter')
 },
 vue: {
 loaders: utils.cssLoaders(),
 postcss: [
  require('autoprefixer')({
  browsers: ['last 2 versions']
  })
 ]
 },
 plugins: [
 // new webpack.optimize.CommonsChunkPlugin('static/build.js'),
 // 提取公共模块
 new webpack.optimize.CommonsChunkPlugin({
  name: 'vendors', // 公共模块的名称
  chunks: chunks, // chunks是需要提取的模块
  minChunks: chunks.length
 }),
 // 配置提取出的样式文件
 new ExtractTextPlugin('css/[name].css'),
 //引入jqury
 new webpack.ProvidePlugin({
  $: "jquery",
  jQuery: "jquery"
 })
 ],
}

webpack.dev.conf.js

var config = require('../config')
var webpack = require('webpack')
var merge = require('webpack-merge')
var utils = require('./utils')
var baseWebpackConfig = require('./webpack.base.conf')
var HtmlWebpackPlugin = require('html-webpack-plugin')
 // add hot-reload related code to entry chunks
Object.keys(baseWebpackConfig.entry).forEach(function(name) {
 baseWebpackConfig.entry[name] = ['./build/dev-client'].concat(baseWebpackConfig.entry[name])
})

module.exports = merge(baseWebpackConfig, {
 module: {
 loaders: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap })
 },
 // eval-source-map is faster for development
 devtool: '#eval-source-map',
 plugins: [
 new webpack.DefinePlugin({
  'process.env': config.dev.env
 }),
 // https://github.com/glenjamin/webpack-hot-middleware#installation--usage
 new webpack.optimize.OccurenceOrderPlugin(),
 new webpack.HotModuleReplacementPlugin(),
 new webpack.NoErrorsPlugin(),
 // https://github.com/ampedandwired/html-webpack-plugin
 // new HtmlWebpackPlugin({
 // filename: 'index.html',
 // template: 'index.html',
 // inject: true
 // })
 ]
})

var pages = utils.getEntry(['./src/module/**/*.html', './src/m/**/*.html']);


for (var pathname in pages) {


 // 配置生成的html文件,定义路径等
 var conf = {
 filename: pathname + '.html',
 template: pages[pathname], // 模板路径
 favicon: './src/assets/images/wechat.png',
 inject: true // js插入位置

 };


 if (pathname in module.exports.entry) {
 conf.chunks = ['vendors', pathname];
 conf.hash = true;
 }

 module.exports.plugins.push(new HtmlWebpackPlugin(conf));
}

webpack.prod.conf.js

var path = require('path')
var config = require('../config')
var utils = require('./utils')
var webpack = require('webpack')
var merge = require('webpack-merge')
var baseWebpackConfig = require('./webpack.base.conf')
var ExtractTextPlugin = require('extract-text-webpack-plugin')
var HtmlWebpackPlugin = require('html-webpack-plugin')
var env = process.env.NODE_ENV === 'testing' ?
 require('../config/test.env') :
 config.build.env

module.exports = merge(baseWebpackConfig, {
 module: {
 loaders: utils.styleLoaders({ sourceMap: config.build.productionSourceMap, extract: true })
 },
 devtool: config.build.productionSourceMap ? '#source-map' : false,
 output: {
 path: config.build.assetsRoot,
 filename: utils.assetsPath('js/[name].[chunkhash].js'),
 chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')
 },
 vue: {
 loaders: utils.cssLoaders({
  sourceMap: config.build.productionSourceMap,
  extract: true
 })
 },
 plugins: [
 // http://vuejs.github.io/vue-loader/workflow/production.html
 new webpack.DefinePlugin({
  'process.env': env
 }),
 new webpack.optimize.UglifyJsPlugin({
  compress: {
  warnings: false,
  drop_debugger: true,
  drop_console: true
  }
 }),
 new webpack.optimize.OccurenceOrderPlugin(),
 // extract css into its own file
 new ExtractTextPlugin(utils.assetsPath('css/[name].[contenthash].css')),
 // generate dist index.html with correct asset hash for caching.
 // you can customize output by editing /index.html
 // see https://github.com/ampedandwired/html-webpack-plugin
 // new HtmlWebpackPlugin({
 // filename: process.env.NODE_ENV === 'testing' ?
 //  'index.html' : config.build.index,
 // template: 'index.html',
 // favicon: './src/assets/images/tjd.ico',
 // inject: true,
 // minify: {
 //  removeComments: true,
 //  collapseWhitespace: true,
 //  removeAttributeQuotes: true
 //  // more options:
 //  // https://github.com/kangax/html-minifier#options-quick-reference
 // },
 // // necessary to consistently work with multiple chunks via CommonsChunkPlugin
 // chunksSortMode: 'dependency'
 // }),
 // split vendor js into its own file
 new webpack.optimize.CommonsChunkPlugin({
  name: 'vendor',
  minChunks: function(module, count) {
  // any required modules inside node_modules are extracted to vendor
  return (
   module.resource &&
   /\.js$/.test(module.resource) &&
   module.resource.indexOf(
   path.join(__dirname, '../node_modules')
   ) === 0
  )
  }
 }),
 // extract webpack runtime and module manifest to its own file in order to
 // prevent vendor hash from being updated whenever app bundle is updated
 new webpack.optimize.CommonsChunkPlugin({
  name: 'manifest',
  chunks: ['vendor']
 })
 ]
})

if (config.build.productionGzip) {
 var CompressionWebpackPlugin = require('compression-webpack-plugin')

 webpackConfig.plugins.push(
 new CompressionWebpackPlugin({
  asset: '[path].gz[query]',
  algorithm: 'gzip',
  test: new RegExp(
  '\\.(' +
  config.build.productionGzipExtensions.join('|') +
  ')$'
  ),
  threshold: 10240,
  minRatio: 0.8
 })
 )
}

var pages = utils.getEntry(['./src/module/**/*.html', './src/m/**/*.html']);

for (var pathname in pages) {


 // 配置生成的html文件,定义路径等
 var conf = {
 filename: pathname + '.html',
 template: pages[pathname], // 模板路径
 favicon: './src/assets/images/wechat.png',
 inject: true // js插入位置

 };
 if (pathname in pages) {
 conf.chunks = ['vendors', pathname];
 conf.hash = true;
 }

 module.exports.plugins.push(new HtmlWebpackPlugin(conf));
}

git地址:https://github.com/dawnyu/vue-cli-multipage.git

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

Javascript 相关文章推荐
nullJavascript中创建对象的五种方法实例
May 07 Javascript
JS获取select-option-text_value的方法
Dec 26 Javascript
详解JavaScript正则表达式之分组匹配及反向引用
Mar 09 Javascript
jQuery实现模拟flash头像裁切上传功能示例
Dec 11 Javascript
根据输入邮箱号跳转到相应登录地址的解决方法
Dec 13 Javascript
Vue表单验证插件Vue Validator使用方法详解
Apr 07 Javascript
JavaScript 中调用 Kotlin 方法实例详解
Jun 09 Javascript
Javascript实现基本运算器
Jul 15 Javascript
关于javascript sort()排序你可能忽略的一点理解
Jul 18 Javascript
thinkjs 文件上传功能实例代码
Nov 08 Javascript
JS变量提升原理与用法实例浅析
May 22 Javascript
Vue中keep-alive组件的深入理解
Aug 23 Javascript
Vue filters过滤器的使用方法
Jul 14 #Javascript
vue.js如何更改默认端口号8080为指定端口的方法
Jul 14 #Javascript
Vue computed计算属性的使用方法
Jul 14 #Javascript
JS实现上传图片的三种方法并实现预览图片功能
Jul 14 #Javascript
JS实现数组去重方法总结(六种方法)
Jul 14 #Javascript
Javascript中Promise的四种常用方法总结
Jul 14 #Javascript
js学习心得_一个简单的动画库封装tween.js
Jul 14 #Javascript
You might like
快速配置PHPMyAdmin方法
2008/06/05 PHP
本地机apache配置基于域名的虚拟主机详解
2013/08/10 PHP
php不使用copy()函数复制文件的方法
2015/03/13 PHP
PHP使用curl_multi_select解决curl_multi网页假死问题的方法
2018/08/15 PHP
PHP命名空间与自动加载类详解
2018/09/04 PHP
php实现每日签到功能
2018/11/29 PHP
js检测浏览器版本、核心、是否移动端示例
2014/04/24 Javascript
js实现特定位取反原理及示例
2014/06/30 Javascript
浅谈js中的引用和复制(传值和传址)
2016/09/18 Javascript
jQuery  ready方法实现原理详解
2016/10/19 Javascript
JS多物体实现缓冲运动效果示例
2016/12/20 Javascript
使用AngularJS2中的指令实现按钮的切换效果
2017/03/27 Javascript
ES6新特性二:Iterator(遍历器)和for-of循环详解
2017/04/20 Javascript
在Vue组件化中利用axios处理ajax请求的使用方法
2017/08/25 Javascript
jQuery实现带右侧索引功能的通讯录示例【附源码下载】
2018/04/17 jQuery
Vue+mui实现图片的本地缓存示例代码
2018/05/24 Javascript
解决vue props 拿不到值的问题
2018/09/11 Javascript
微信小程序实现星星评价效果
2018/11/02 Javascript
vue实现动态按钮功能
2019/05/13 Javascript
Vue Element UI + OSS实现上传文件功能
2019/07/31 Javascript
Vue中函数防抖节流的理解及应用实现
2020/04/24 Javascript
[01:14:05]《加油DOTA》第四期
2014/08/25 DOTA
python和ruby,我选谁?
2017/09/13 Python
如何利用Pyecharts可视化微信好友
2019/07/04 Python
浅谈Python中re.match()和re.search()的使用及区别
2020/04/14 Python
python自动提取文本中的时间(包含中文日期)
2020/08/31 Python
百思买美国官网:Best Buy
2016/07/28 全球购物
复古斯堪的纳维亚儿童服装:Baby go Retro
2017/09/09 全球购物
集世界奢侈品和设计师品牌的意大利精品买手店:Tessabit
2019/08/17 全球购物
应用化学专业职业生涯规划书
2014/01/22 职场文书
甜点店创业计划书
2014/01/27 职场文书
土木工程专业推荐信
2014/02/19 职场文书
新春联欢会主持词
2014/03/24 职场文书
《故乡》教学反思
2014/04/10 职场文书
年终工作总结范文2014
2014/11/27 职场文书
校运会班级霸气口号
2015/12/24 职场文书