vue多页面配置
多页面案例
用 vue-cli安装 初始化一个vue单页面项目，然后做如下修改：
1、在 package.json 文件里添加一个依赖 glob ,然后执行 npm install
"devDependencies": {
//....
"webpack-merge": "^4.1.0",
"glob":"^7.0.3" //1、glob是webpack安装时依赖的一个第三方模块，还模块允许你使用 *等符号, 例如lib/*.js就是获取lib文件夹下的所有js后缀名的文件
},2、修改webpack配置，需要改动的文件都在build文件下，分别是：
- utils.js
- webpack.base.conf.js
- webpack.dev.conf.js
webpack.prod.conf.js
修改如下：
A、 build >> utils.js文件：结尾处添加
/* 111这里是添加的部分 ---------------------------- 开始 */
// glob是webpack安装时依赖的一个第三方模块，还模块允许你使用 *等符号, 例如lib/*.js就是获取lib文件夹下的所有js后缀名的文件
var glob = require('glob')
// 页面模板
var HtmlWebpackPlugin = require('html-webpack-plugin')
// 取得相应的页面路径，因为之前的配置，所以是src文件夹下的pages文件夹
var PAGE_PATH = path.resolve(__dirname, '../src/pages')
// 用于做相应的merge处理
var merge = require('webpack-merge')
//多入口配置
// 通过glob模块读取pages文件夹下的所有对应文件夹下的js后缀文件，如果该文件存在
// 那么就作为入口处理
exports.entries = function () {
// var entryFiles = glob.sync(PAGE_PATH + '/*/*.js')
var entryFiles = glob.sync('./src/pages/*/*.js')
var map = {}
entryFiles.forEach((filePath) => {
var filename = filePath.substring(filePath.lastIndexOf('\/') + 1, filePath.lastIndexOf('.'))
map[filename] = filePath
})
return map
}
//多页面输出配置
// 与上面的多页面入口配置相同，读取pages文件夹下的对应的html后缀文件，然后放入数组中
exports.htmlPlugin = function () {
let entryHtml = glob.sync(PAGE_PATH + '/*/*.html')
let arr = []
entryHtml.forEach((filePath) => {
let filename = filePath.substring(filePath.lastIndexOf('\/') + 1, filePath.lastIndexOf('.'))
let conf = {
// 模板来源
template: filePath,
// 文件名称
filename: filename + '.html',
// 页面模板需要加对应的js脚本，如果不加这行则每个页面都会引入所有的js脚本
chunks: ['manifest', 'vendor', filename],
inject: true
}
if (process.env.NODE_ENV === 'production') {
conf = merge(conf, {
minify: {
removeComments: true,
collapseWhitespace: true,
removeAttributeQuotes: true
},
chunksSortMode: 'dependency'
})
}
arr.push(new HtmlWebpackPlugin(conf))
})
return arr
}
/* 111这里是添加的部分 ---------------------------- 结束 */B、build >> webpack.base.conf.js文件
module.exports = {
/* 222修改部分 ---------------- 开始 */
entry: utils.entries(),
// entry: {
// app: './src/main.js'
// },
/* 222修改部分 ---------------- 结束 */
}C、build >> webpack.dev.conf.js 文件
plugins: [
new webpack.DefinePlugin({
'process.env': config.dev.env
}),
// https://github.com/glenjamin/webpack-hot-middleware#installation--usage
new webpack.HotModuleReplacementPlugin(),
new webpack.NoEmitOnErrorsPlugin(),
// https://github.com/ampedandwired/html-webpack-plugin
/* 333注释这个区域的文件 ------------- 开始 */
// new HtmlWebpackPlugin({
// filename: 'index.html',
// template: 'index.html',
// inject: true
// }),
/* 333注释这个区域的文件 ------------- 结束 */
new FriendlyErrorsPlugin()
/* 444添加 .concat(utils.htmlPlugin()) ------------------ */
].concat(utils.htmlPlugin())D、build >> webpack.prod.conf.js 文件
plugins: [
// http://vuejs.github.io/vue-loader/en/workflow/production.html
new webpack.DefinePlugin({
'process.env': env
}),
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false
},
sourceMap: true
}),
// extract css into its own file
new ExtractTextPlugin({
filename: utils.assetsPath('css/[name].[contenthash].css')
}),
// Compress extracted CSS. We are using this plugin so that possible
// duplicated CSS from different components can be deduped.
new OptimizeCSSPlugin({
cssProcessorOptions: {
safe: true
}
}),
// 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
/* 555注释这个区域的内容 ---------------------- 开始 */
// new HtmlWebpackPlugin({
// filename: config.build.index,
// template: 'index.html',
// 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'
// }),
/* 555注释这个区域的内容 ---------------------- 结束 */
// 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']
}),
// copy custom static assets
new CopyWebpackPlugin([{
from: path.resolve(__dirname, '../static'),
to: config.build.assetsSubDirectory,
ignore: ['.*']
}])
/* 666该位置添加 .concat(utils.htmlPlugin()) ------------------- */
].concat(utils.htmlPlugin())3、webpack的配置好后，修改文件结构
pages
|--index--index.html \ index.vue \ index.js
|--login--login.html \ login.vue \ login.js
|--member--member.html \ member.vue \ member.js
其他：
1、去除格式规范\关闭eslint检测：bulid > webpack.base.config.js 将createLintingRule方法 内容注释或删掉
之前版本方法为注释如下代码 :
//{
// test: /\.(js|vue)$/,
// loader: 'eslint-loader',
// enforce: 'pre',
// include: [resolve('src'), resolve('test')],
// options: {
// formatter: require('eslint-friendly-formatter')
// }
// }更新了最新的vue之后的是：
//...(config.dev.useEslint ? [createLintingRule()] : []),2、package.json添加开发所需包文件：
"dependencies": {
"vue": "^2.5.2",
- "vue-router": "^3.0.1"
+ "vue-router": "^3.0.1",
+ "store": "^2.0.12",
+ "element-ui": "^2.2.0",
+ "element-china-area-data": "^4.0.0",
+ "echarts": "^3.7.1",
+ "baidu-map": "^0.1.4",
+ "axios": "^0.16.2",
+ "less": "^2.7.2",
+ "less-loader": "^4.0.4",
+ "style-loader": "^0.19.0"
},
"devDependencies": {
"autoprefixer": "^7.1.2",
@@ -74,7 +83,9 @@
"webpack-bundle-analyzer": "^2.9.0",
"webpack-dev-server": "^2.9.1",
"webpack-merge": "^4.1.0",
- "glob":"^7.0.3"
+ "glob":"^7.0.3",
+ "node-sass": "^4.7.2",
+ "sass-loader": "^6.0.6"
},例子：https://github.com/Eva-3288/vuePages
参考文章：
https://segmentfault.com/a/1190000011265006
https://www.jianshu.com/p/acbff04b4096