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 相关文章推荐
一个简单的js动画效果代码
Jul 20 Javascript
JS通过分析userAgent属性来判断浏览器的类型及版本
Mar 28 Javascript
jquery 实现input输入什么div图层显示什么
Jun 15 Javascript
妙用Bootstrap的 popover插件实现校验表单提示功能
Aug 29 Javascript
BootStrap与validator 使用笔记(JAVA SpringMVC实现)
Sep 21 Javascript
vue2.0结合DataTable插件实现表格动态刷新的方法详解
Mar 17 Javascript
关于Promise 异步编程的实例讲解
Sep 01 Javascript
Element-ui tree组件自定义节点使用方法代码详解
Sep 17 Javascript
手动下载Chrome并解决puppeteer无法使用问题
Nov 12 Javascript
Electron autoUpdater实现Windows安装包自动更新的方法
Dec 24 Javascript
JS hasOwnProperty()方法检测一个属性是否是对象的自有属性的方法
Jan 29 Javascript
JS前端使用canvas实现扩展物体类和事件派发
Aug 05 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
php的memcache类分享(memcache队列)
2014/03/26 PHP
windows中为php安装mongodb与memcache
2015/01/06 PHP
ThinkPHP使用getlist方法实现数据搜索功能示例
2017/05/08 PHP
基于ThinkPHP5.0实现图片上传插件
2017/09/25 PHP
php 获取xml接口数据的处理方法
2018/05/31 PHP
PHP实现字符串大小写转函数的功能实例
2019/02/06 PHP
JavaScript 计算当天是本年本月的第几周
2009/03/22 Javascript
用JavaScript页面不刷新时全选择,全删除(GridView)
2009/04/14 Javascript
替代window.event.srcElement效果的可兼容性的函数
2009/12/18 Javascript
Jquery中val()表单取值赋值的实例代码
2013/08/15 Javascript
简单的js表单验证函数
2013/10/28 Javascript
JQuery.get提交页面不跳转的解决方法
2015/01/13 Javascript
Linux系统中利用node.js提取Word(doc/docx)及PDF文本的内容
2017/06/17 Javascript
JS对象序列化成json数据和json数据转化为JS对象的代码
2017/08/23 Javascript
React-Native中props具体使用详解
2017/09/04 Javascript
react-native中ListView组件点击跳转的方法示例
2017/09/30 Javascript
修改UA在PC中访问只能在微信中打开的链接方法
2017/11/27 Javascript
浅谈vue.js导入css库(elementUi)的方法
2018/03/09 Javascript
微信小程序车牌号码模拟键盘输入功能的实现代码
2018/11/11 Javascript
linux系统使用python获取cpu信息脚本分享
2014/01/15 Python
python实现封装得到virustotal扫描结果
2014/10/05 Python
Python操作MySQL模拟银行转账
2018/03/12 Python
python opencv实现图像边缘检测
2019/04/29 Python
Python Django 简单分页的实现代码解析
2019/08/21 Python
实例代码讲解Python 线程池
2020/08/24 Python
Python 连接 MySQL 的几种方法
2020/09/09 Python
python实现KNN近邻算法
2020/12/30 Python
CSS3地图动态实例代码(圆圈向外扩散)
2018/06/15 HTML / CSS
今天学到的CSS最新技术(与图片背景相关)
2012/12/24 HTML / CSS
Viking比利时:购买办公用品
2019/10/30 全球购物
公共事业管理本科生求职信
2013/10/07 职场文书
导游的职业规划书范文
2013/12/27 职场文书
水电站项目建议书
2014/05/12 职场文书
幼儿园母亲节活动总结
2015/02/10 职场文书
2015年“公民道德宣传日”活动方案
2015/05/06 职场文书
Python数据可视化之基于pyecharts实现的地理图表的绘制
2021/06/10 Python