本文介绍了weex默认webpack.config.js改造,分享给大家,具体如下:
解决的问题:
由于weex默认的webpack配置,会导致在src文件夹下的每一个.vue在temp文件夹下生成对应的一个.js文件,该js文件有一段这样的代码
contents += 'var App = require(\'' + relativePath + '\')\n'; contents += 'App.el = \'#root\'\n'; contents += 'new Vue(App)\n';
会导致多个vue对象挂载同一个id(#root),导致整个页面就只有一个vue对象,无法像写spa项目一样写weex项目,因此在这里对webpack.cofig进行改造(添加一个entry.js入口js文件,和一个最外层的App.vue承载路由渲染)
默认的webpack.config.js文件中,有两个方法
第一个 getEntryFileContent
const getEntryFileContent = (entryPath, vueFilePath) => { let relativePath = pathTo.relative(pathTo.join(entryPath, '../'), vueFilePath); let contents = ''; /** * The plugin's logic currently only supports the .we version * which will be supported later in .vue */ if (hasPluginInstalled) { const plugindir = pathTo.resolve('./web/plugin.js'); contents = 'require(\'' + plugindir + '\') \n'; } if (isWin) { relativePath = relativePath.replace(/\\/g, '\\\\'); } contents += 'var App = require(\'' + relativePath + '\')\n'; contents += 'App.el = \'#root\'\n'; contents += 'new Vue(App)\n'; return contents; }
第二个 walk
const walk = (dir) => { dir = dir || '.'; const directory = pathTo.join(__dirname, 'src', dir); fs.readdirSync(directory).forEach((file) => { const fullpath = pathTo.join(directory, file); const stat = fs.statSync(fullpath); const extname = pathTo.extname(fullpath); if (stat.isFile() && extname === '.vue' || extname === '.we') { if (!fileType) { fileType = extname; } if (fileType && extname !== fileType) { console.log('Error: This is not a good practice when you use ".we" and ".vue" togither!'); } const name = pathTo.join(dir, pathTo.basename(file, extname)); if (extname === '.vue') { const entryFile = pathTo.join(vueWebTemp, dir, pathTo.basename(file, extname) + '.js'); fs.outputFileSync(pathTo.join(entryFile), getEntryFileContent(entryFile, fullpath)); entry[name] = pathTo.join(__dirname, entryFile) + '"htmlcode">const entry = {index: pathTo.resolve('src', 'entry.js')}; const weexEntry = {index: pathTo.resolve('src', 'entry.js')};删除或者更改配置(当然,第三种方法还可以把.vue组件不写在src内)
删除
- 删除getEntryFileContent函数
- 删除walk函数
- 删除walk() walk函数的调用
修改(代码来自github上高仿网易严选项目)
注意看最外层的if判断,添加了额外条件 如果是文件且后缀是.vue且不是App.vue的,则进入判断。否则,判断是不是page文件夹,如果不是,则结束。
function walk(dir) { dir = dir || '.'; const directory = pathTo.join(__dirname, 'src', dir); fs.readdirSync(directory) .forEach((file) => { const fullpath = pathTo.join(directory, file); const stat = fs.statSync(fullpath); const extname = pathTo.extname(fullpath); const basename = pathTo.basename(fullpath); console.log("配置",file,fullpath,stat,extname,basename,) if (stat.isFile() && extname === '.vue' && basename != 'App.vue' ) { if (!fileType) { fileType = extname; } if (fileType && extname !== fileType) { console.log('Error: This is not a good practice when you use ".we" and ".vue" togither!'); } const name = pathTo.join(dir, pathTo.basename(file, extname)); if (extname === '.vue') { const entryFile = pathTo.join(vueWebTemp, dir, pathTo.basename(file, extname) + '.js'); fs.outputFileSync(pathTo.join(entryFile), getEntryFileContent(entryFile, fullpath)); entry[name] = pathTo.join(__dirname, entryFile) + '?entry=true'; } weexEntry[name] = fullpath + '?entry=true'; } else if (stat.isDirectory() && ['build','include','assets','filters','mixins'].indexOf(file) == -1 ) { const subdir = pathTo.join(dir, file); walk(subdir); } }); }以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
风云阁资源网 Design By www.bgabc.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
风云阁资源网 Design By www.bgabc.com
暂无评论...
更新日志
2024年11月15日
2024年11月15日
- 永恒英文金曲精选4《TheBestOfEverlastingFavouritesVol.4》[WAV+CUE]
- 群星《国风超有戏 第9期》[320K/MP3][13.63MB]
- 群星《国风超有戏 第9期》[FLAC/分轨][72.56MB]
- P1X3L《P1X3L》[320K/MP3][143MB]
- 群星.2022-良辰好景知几何电视剧原声带【SONY】【FLAC分轨】
- 庾澄庆.1991-管不住自己【福茂】【WAV+CUE】
- 欧倩怡.2001-Cindy(EP)【华星】【WAV+CUE】
- P1X3L《P1X3L》[FLAC/分轨][791.28MB]
- 茵达INDAHKUS《茵 the Blue》[320K/MP3][33.49MB]
- 茵达INDAHKUS《茵 the Blue》[FLAC/分轨][147.57MB]
- 老虎鱼AnneClarkwithUllavanDaelenJustinCiuche-Borderland-HiRes-Files24bit88.2kHz
- 江玲2004-百合盛开2CD[歌林][WAV+CUE]
- 孙露《怕什么孤单3CD》深圳音像[WAV分轨]
- s14全球总决赛目前是什么结果 s14全球总决赛赛程结果图一览
- s2TPA夺冠五人名单都有谁 tpa战队s2夺冠队员名单一览