基于vue cli重构多页面脚手架过程详解

基于vue cli重构多页面脚手架过程详解

官方提供的项目生成工具vue-cli没有对多页面webApp的支持，但是在实际的项目中，我们需要这样的脚手架，参考了很多大牛的方法，这里提供了一种我的单页面脚手架转换为多页面脚手架的方案，供大家参考。不好的地方也请大家指正。

准备

使用vue-cli生成一个你需要的单页面项目脚手架，然后我们就要开始我们的改装工程了。

重构过程

步骤一 改变目录结构

step1 在src目录下面新建views文件夹,然后再views文件夹下新建index文件夹

step2 将src目录下的main.js和App.vue移动到step1中的index文件夹下，并将main.js重命名为index.js

sjlsRYXSXtep3 将src目录下的router文件夹移动到step1中的index文件夹下，如果不使用router可以再index.js中注释掉，我没有使用，因为我的每个页面不是单页面的应用，不必要使用路由功能

step4 将根目录下的index.html文件移动到step1中的index文件夹下

步骤二 修改build下的配置文件

在生产环境下会分页面打包独有js文件，并抽取公共js，不会什么都打包成一坨。打包后文件目录结构也是比较清晰地。一下所有修改都在build文件夹下

step1 修改utils.js，增加两个函数，一个用来获取页面多入口，一个用来输入打包后的页面，并注入js:

var glob = require('glob')

var HtmlWebpackPlugin = require('html-webpack-plugin')

var PAGE_PATH = path.resolve(__dirname, '../src/views')

var merge = require('webpack-merge')

//多入口配置

//获取views文件夹下，每个页面下的index.js作为页面入口，故每个页面下都必须有index.js

exports.entries = function() {

var entryFiles = glob.sync(PAGE_PATH + '/*/index.js')

var map = {}, tmp = [], pathname = '';

entryFiles.forEach((filePath) => {

var filename = filePath.substring(filePath.lastIndexOf('\/') + 1, filePath.lastIndexOf('.'))

tmp = filePath.split('/').splice(-4)

map[tmp[2] + '/' + filename] = filePath

})

return map

}

//多页面输出配置

//读取views文件夹下的对应每个页面的html后缀文件，然后放入数组中

//如果想要更深的定制或者修改，建议大家看一下CommonsChunkPlugin

//推荐一个基础的 https://segmentfault.com/q/1010000009070061

exports.htmlPlugin = function() {

let entryHtml = glob.sync(PAGE_PATH + '/*/*.html')

let arr = []

entryHtml.forEach((filePath) => {

let jsPath = '', tmp = [];

let filename = filePath.substring(filePath.lastIndexOf('\/') + 1, filePath.lastIndexOf('.'))

tmp = filePath.split('/').splice(-4)

jsPath = tmp[2] + '/' + 'index'

let conf = {

template: filePath,

filename: filename + '.html',

chunks: ['manifest', 'vendors', jsPath],

inject: true

}

if (process.env.NODE_ENV === 'production') {

conf = merge(conf, {

minify: {

removeComments: true,

collapseWhitespace: true,

removeAttributeQuotes: true

},

chunksSortModehttp://: 'dependency'

})

}

arr.push(new HtmlWebpackPlugin(conf))

})

return arr

}

step2 修改webpack.base.conf.js文件配置的入口

// entry: {

// app: './src/main.js'

// },

entry: utils.entries(),

step3 修改webpack.dev.conf.js文件的打包方法 找到下面的代码，将其注释掉：

new HtmlWebpackPlugin({

filename: 'index.html',

template: 'index.html',

inject: true

}),

在plugins这个属性值的后面加上我们上面的方法，下面是代码片段：

// new HtmlWebpackPlugin({

// filename: 'index.html',

// template: 'index.html',

// inject: true

// }),

new FriendlyErrorsPlugin()

].concat(utils.htmlPlugin())

step4 修改webpack.prod.conf.js 找到下面的代码，注释掉：

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'

}),

在plugins这个属性值的后面加上我们上面的方法，下面是代码片段：

new CopyWebpackPlugin([{

from: path.resolve(__dirname, '../static'),

to: config.build.assetsSubDirectory,

ignore: ['.*']

}])

].concat(utils.htmlPlugin())

配置完成。正常启动项目即可。

总结

以上所述是给大家介绍的基于vuehttp:// cli重构多页面脚手架过程详解，希望对大家有所帮助，如果大家有任何疑问请给我留言，会及时回复大家的。在此也非常感谢大家对我们网站的支持！

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。