介绍“scripts":, {
,,…
“build-outCMP"才能:,“node 构建/build-out-components.js"
}, & # 39; use 严格# 39;
要求(& # 39;。/check-versions& # 39;) ()
时间=process.env.NODE_ENV & # 39;生产# 39;
const ora =,要求(& # 39;奥拉# 39;)
const path =,要求(& # 39;path & # 39;)
const chalk =,要求(& # 39;粉笔# 39;)
const webpack =,要求(& # 39;webpack& # 39;)
const webpackConfig =,要求(& # 39;。/webpack.out-components.prod.conf& # 39;)
const spinner =,奥拉(& # 39;building for sync-components……& # 39;)
spinner.start ()
webpack (webpackConfig, function (呃,,统计数据),{
,spinner.stop ()
,if (错),throw 犯错
,process.stdout.write (stats.toString ({
颜色:才能,真的,
,,模块:假的,
,,孩子们:假的,
块才能:假的,
chunkModules才能:假
,})+,& # 39;\ n \ n # 39;)
,if (stats.hasErrors ()), {
console.log才能(chalk.red (& # 39;, Build failed with 错误。\ n # 39;))
process.exit才能(1)
,}
,console.log (chalk.cyan (& # 39;, Build 完成。\ n # 39;))
,console.log (chalk.yellow (
& # 39;才能,提示:,built files 断开连接;meant 用be served 配套;an HTTP 服务器。\ n # 39; +
& # 39;才能,Opening index.html 配套;文件://,赢得\ & # 39;t 工作。\ n # 39;
,))
}) const webpack =,要求(& # 39;webpack& # 39;);
const path =,要求(& # 39;path & # 39;);
const utils =,要求(& # 39;。/跑龙套# 39;);
const OptimizeCSSPlugin =,要求(& # 39;optimize-css-assets-webpack-plugin& # 39;)
const {,, mkdirsSync},=,要求(& # 39;。/out-components-tools& # 39;)
function 解决(dir), {
,return path.join (__dirname, & # 39; . . & # 39;,, dir)
}
mkdirsSync(解决(& # 39;/静态/outComponents& # 39;))
module.exports =, {
,条目:条目,
,输出:{
路径:,才能解决(& # 39;/静态/outComponents& # 39;),
,,文件名:& # 39;[名字]. js # 39;
},
,解决:{
扩展才能:[& # 39;. js # 39;,, & # 39; .vue& # 39;,, & # 39; . json # 39;],
,,别名:{
,,& # 39;vue $ & # 39;:, & # 39; vue/dist/vue.esm.js& # 39;
,,& # 39;@ # 39;:,解决(& # 39;src # 39;),
,,}
},
,外部:{
vue才能:& # 39;vue # 39;
axios才能:& # 39;axios& # 39;
},
,模块:{
规则:,才能
,,{
,,,测试:,/\ .vue/美元,
,,,装载机:,& # 39;vue-loader& # 39;
,,,选择:,{
,,,,esModule:,假的,,//,vue-loader v13 更新,默认值为,true v12及之前版本为,假,,此项配置影响,vue 自身异步组件写法以及,webpack 打包结果
,,,,加载器:,utils.cssLoaders ({
,,,,,sourceMap:,真的,
,,,,,精华:,false ,,,,//, css 不做提取
,,,,}),
,,,,transformToRequire:, {
,,,,,视频:,& # 39;src # 39;
,,,,,来源:,& # 39;src # 39;
,,,,,img:, & # 39; src # 39;
,,,,,图片:,& # 39;xlink: href # 39;
,,,,}
,,,}
,,},
,,{
,,,测试:,/\ . js/美元,
,,,装载机:,& # 39;babel-loader& # 39;
,,,包括:,(解决(& # 39;src # 39;),,解决(& # 39;测试# 39;))
,,},
,,{
,,,测试:,/\。gif (png | jpe ? g | | svg)(\ ?。*) ?/美元,
,,,装载机:,& # 39;url-loader& # 39;
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
今天就跟大家聊聊有关怎么在Vue中动态加载异步组件,可能很多人都不太了解,为了让大家更加了解,小编给大家总结了以下内容,希望大家根据这篇文章可以有所收获。
<强>背景:
目前我们项目都是按组件划分的,然后各个组件之间封装成产品。目前都是采用iframe直接嵌套页面。项目中我们还是会碰到一些通用的组件跟业务之间有通信,这种情况下iframe并不是最好的选择,iframe存在跨域的问题,当然是postMessage还是可以通信的,但也并非是最好的。目前有这么一个场景:门户需要制作通用的首页和数据概览页面,首页和数据概览页面通过小部件来自由拼接。业务组件在制作的时候只需要提供各个模块小部件的url就可以了,可是如果小部件之间还存在联系呢?那么iframe是不好的。目前采用Vue动态加载异步组件的方式来实现小组件之间的通信。当然门户也要提供一个通信的基线:Vue事件总线(空的Vue实例对象)。
<强>内容:
使用过Vue的都应该知道Vue的动态加载组件组件:
Vue通过是来绑定需要加载的组件。那么我们现在需要的就是如何打包组件,如果通过复制业务组件内部的代码,那么这种就需要把依赖全部找齐,并复制过去(很多情况下会漏下某个图片或css等),这种方式是比较低的、不方便维护。因此我们需要通过webpack来打包单个Vue文件成js,这边一个Vue打包成一个js,不需压代码分割,css分离,因为组件加载时只需要加载一个文件即可。打包文件配置如下:
首先在包中。json加入打包命令:
Build-out-components。js文件:
webpack.out-components.prod.conf。js文件配置如下
