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

网络编程 2024/11/13 佚名

3 2 1

前言

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

技术栈

vue: 2.0.1
vue-resource：1.0.3
vue-router：2.0.0
webpack：1.13.2
gulp：3.9.1
ES6

运行

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

改造后的目录

可以多目录生成目标文件

公共的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' "htmlcode">

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' "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' "external nofollow" target="_blank" href="https://github.com/dawnyu/vue-cli-multipage.git">https://github.com/dawnyu/vue-cli-multipage.git


以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

vue-cli单页改成多页应用,vue-cli,多页应用