<强>前言
从接触vue开始用的是vue-cli直接搭建单页应用,参考配合着vue-router开发起来简直爽到吊炸天,但是由于项目越来越复杂了,单页用起来可能有点力不从心,能不能弄成多页面呢,查了相关资料得到的结论是完全可以的,能多页面多入口,并且可以使用组件,还引入jQuery,这简直完美了,这个演示是从我已经改造完成的项目中摘出来的,现在演示下怎么把基于vue2的vue-cli单页模板改造成多页面,并且多入口的项目。
<>强技术栈
<李> vue: 2.0.1李
<李> vue-resource: 1.0.3李
<李> vue-router: 2.0.0李
<李> webpack: 1.13.2李
<李>杯:3.9.1李
<李> ES6李
<>强运行
git克隆https://github.com/dawnyu/vue-cli-multipage.git
npm安装
npm运行构建
npm运行dev
改造后的目录
可以多目录生成目标文件
公共的js和样式图标放到资产文件夹即可
修改点
构建/utils.js
var路径=要求(“路径”)
var配置=要求(. ./配置)
var水珠=要求(“水珠”)//将样式提取到单独的css文件中,而不是打包到js文件或使用风格标签插入在头标签中
var ExtractTextPlugin=要求(“extract-text-webpack-plugin”)
出口。assetsPath=函数(_path) {
var assetsSubDirectory=process.env。NODE_ENV===? # 63;
config.build。assetsSubDirectory:
config.dev.assetsSubDirectory
path.posix返回。加入(assetsSubDirectory _path)
}
出口。cssLoaders=function(选项){
选项=选项| | {}//生成装载机使用插件中提取文本字符串
函数generateLoaders(装载机){
var sourceLoader=loaders.map(函数(装载机){
var extraParamChar
如果(/\ & # 63;/test(装载机)){
装载机=loader.replace (/\ & # 63;,“-loader& # 63;”)
extraParamChar=', '
其他}{
装载机=装载机+的装载机
extraParamChar=' & # 63;
}
返回装载机+(选项。sourceMap & # 63;extraParamChar +“sourceMap”:”)
}). join (!)
如果(options.extract) {
ExtractTextPlugin返回。提取(vue-style-loader, sourceLoader)
其他}{
返回(“vue-style-loader”, sourceLoader) . join (!)
}
}//http://vuejs.github.io/vue-loader/configurations/extract-css.html
返回{
css: generateLoaders ([' css ']),
postcss: generateLoaders ([' css ']),
少:generateLoaders ([‘css’,‘少’]),
sass: generateLoaders ([' css ', ' sass # 63; indentedSyntax ']),
scss: generateLoaders ([“css”、“萨斯”]),
笔:generateLoaders ([“css”、“笔”]),
styl: generateLoaders ([“css”、“笔”])
}
}//生成独立的风格文件加载器(.vue以外的)
出口。styleLoaders=function(选项){
var输出=[]
var装载机=exports.cssLoaders(选项)
在加载器(var扩展){
var装载机=加载器(扩展)
output.push ({
测试:新的正则表达式(‘\ \。”+推广+“美元”),
装载机:加载程序
})
}
返回输出
}//增加获取多入口的方法注意这个参数是个数组
出口。getEntry=函数(globPaths) {
var条目={},
basename tmp,路径名;
(globPath globPaths) {
glob.sync globPath .forEach(函数(条目){
basename=路径。:条目,path.extname(条目));
tmp=entry.split (“/? .splice (3);
路径名=tmp。拼接(0,1)+ '/' + basename;//正确输出js和html的路径
条目(路径)=条目;
});
}
console.log(条目);
返回条目;
}
之前
webpack.base.conf.js
var路径=要求(“路径”)
var配置=要求(. ./配置)
var webpack=要求(“webpack”)
var=需要合并(“webpack-merge”)
var跑龙套=要求(“/跑龙套。”)
var projectRoot=路径。解决(__dirname“. ./?///猟riname当前目录
var=种(utils.getEntry块([’。/src/模块/* */*。js”、“。/src/m/* */* . js ']));//将样式提取到单独的css文件中,而不是打包到js文件或使用风格标签插入在头标签中
var ExtractTextPlugin=要求(“extract-text-webpack-plugin”);
模块。出口={
条目:utils.getEntry ([’。/src/模块/* */*。js”、“。/src/m/* */* . js ']),//传入需要打包的入口,我这里是pc端和手机端入口打到一个包里
输出:{
路径:config.build.assetsRoot,
publicPath: process.env。NODE_ENV===? # 63;config.build。assetsPublicPath: config.dev.assetsPublicPath,//根名称可配置
文件名:“[名字]. js”
},
解决:{
扩展:[",”。js”、“.vue”),
回退:[路径。加入(__dirname“. ./node_modules”),
别名:{
“src”:路径。解决(__dirname“. ./src”),
“资产”:路径。解决(__dirname“. ./src/资产”),
“组件”:路径。解决(__dirname“. ./src/组件”),
“jquery”:“jquery”
}
},
resolveLoader: {
回退:[路径。加入(__dirname“. ./node_modules”)]
},
模块:{
加载器:[{
测试:/\ .vue/美元,
装载机:“vue-loader”
},
{
测试:/\ . js/美元,
装载机:“巴别塔”,
包括:projectRoot、
排除:/node_modules/},
{
测试:/\ . json/美元,
装载机:“json”
},
{
测试:/\。(png | jpe # 63; g | gif | svg)(\ & # 63;。*) & # 63;美元/,
装载机:“url”,
查询:{
限制:30000
名称:utils.assetsPath (“img/[名字]。[散列:7]。[ext]”)
}
},
{
测试:/\。(woff2& # 63; |测试结束| ttf |传递)(\ & # 63;。*)& # 63;美元/,
装载机:“url”,
查询:{
限制:10000
名称:utils.assetsPath(“字体/[名字]。[散列:7]。[ext]”)
}
}
]
},
eslint: {
格式化程序:需要(“eslint-friendly-formatter”)
},
vue: {
加载器:utils.cssLoaders (),
postcss:(
要求(autoprefixer) {
浏览器(最后2版本的):
})
]
},
插件:[//新webpack.optimize.CommonsChunkPlugin(“静态/build.js”),//提取公共模块
新webpack.optimize.CommonsChunkPlugin ({
名称:“供应商”,//公共模块的名称
块:块,//块是需要提取的模块
minChunks: chunks.length
}),//配置提取出的样式文件
新ExtractTextPlugin (css/[名字]. css),//引入jqury
新webpack.ProvidePlugin ({
美元:“jquery”,
jQuery:“jQuery”
})
]，
}
