加载vue远程代码的组件实例详解
在我们的 vue 项⽬中（特别是后台系统），总会出现⼀些需要多业务线共同开发同⼀个项⽬的场景，如果各业务团队向框架中提供⼀些私有的展⽰组件，但是这些组件并不能和框架⼀起打包，因为框架不能因为某个私有模块的频繁变更⽽重复构建发布。在这种场景下我们需要⼀个加载远程异步代码的组件来完成将这些组件加载到框架中。
vue-cli 作为 Vue 官⽅推荐的项⽬构建脚⼿架，它提供了开发过程中常⽤的，热重载，构建，调试，单元测试，代码检测等功能。我们本次的异步远端组件将基于 vue-cli 开发。
需求分析
1. 如何加载远端的代码?
2. 如何注册加载后的代码到框架中。
3. ⽗组件如何和远端引⼊的组件通信。
4. 远端代码如何复⽤框架中已引⼊的库。
5. 避免因远端代码被类似 v-for 多次调⽤导致的不必要请求。
加载远端代码
远端代码应该存储在⼀个可访问的 URL 上，这样我们通过 Axios 类似的 HTTP client 请求这个链接拿到源码。
import Axios from 'axios';
export default {
name: 'SyncComponent',
props: {
// ⽗组件提供请求地址
url: {
type: String,
default: ''
}
},
data() {
return {
resData: ''
};
},
async mounted() {
if (!this.url) return;
const res = (this.url); // 我们在组件挂载完成时，请求远端代码并存储结果。
}
};
以上是基础代码为了⽅便⼀下例⼦中我将省略重复的代码部分。
注册代码到框架中
这部分有些繁琐，涉及到多个问题：
浏览器并不⽀持 .vue 模板或 ES.next 语法，模块需要编译后才可以使⽤。
处理这部分⽐较简单，我们⾃⼰定义⼀个webpack配置⽂件来打包这些模板。
// 在 build ⽬录下新建 webpack.f.js ⽂件
const webpack = require('webpack');
const path = require('path');
const utils = require('./utils');
const OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin')
function resolve(dir) {
return path.join(__dirname, '..', dir)
}
// 此处引⼊要打包的组件
entry: {
componentA: resolve('/src/views/component-a.vue')
},
// 输出到静态⽬录下
output: {
path: resolve('/static/'),
filename: '[name].js',
},
resolve: {
extensions: ['.js', '.vue', '.json'],
alias: {
'vue$': 'vue/dist/vue.esm.js',
'@': resolve('src'),
}
},
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader',
options: {
esModule: false, // ****** vue-loader v13 更新默认值为 true v12及之前版本为 false, 此项配置影响 vue ⾃⾝异步组件写法以及 webpack 打包结果    loaders: utils.cssLoaders({
sourceMap: true,
extract: false    // css 不做提取
}),
transformToRequire: {
video: 'src',
source: 'src',
img: 'src',
image: 'xlink:href'
}
}
},
{
test: /\.js$/,
loader: 'babel-loader',svg实例
include: [resolve('src'), resolve('test')]
},
{
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: utils.assetsPath('img/[name].[hash:7].[ext]')
}
},
{
test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: utils.assetsPath('media/[name].[hash:7].[ext]')
}
},
{
test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
}
}
]
},
plugins: [
new webpack.DefinePlugin({
'v.NODE_ENV': '"production"'
}),
// 压缩JS
new webpack.optimize.UglifyJsPlugin({
compress: false,
sourceMap: true
}),
// 压缩CSS 注意不做提取
new OptimizeCSSPlugin({
cssProcessorOptions: {
safe: true
}
})
]
};
⾄此我们的模块已经被编译成框架可以识别的⽂件。
1.如何将字符串转换成js对象。
new Function。
async mounted() {
if (!this.url) return;
const res = (this.url);
let Fn = Function;
}
1.转换后的js对象并不能被vue识别。
有两种可能会导致这个问题：
// vue-loader v13 esModule 更新默认值为 true, v12及之前版本为 false, 此项配置影响 vue ⾃⾝异步组件写法以及 webpack 打包结果
{
test: /\.vue$/,
loader: 'vue-loader',
options: {
esModule: false
... 以下省略千军万码
}
}
// UglifyJs 需要取消变量名替换配置，此配置并不会极⼤影响压缩率
new webpack.optimize.UglifyJsPlugin({
compress: false,
sourceMap: true
})
⾄此远程组件就被引⼊到框架中了。
⽗组件如何和远端引⼊的组件通信
这⾥有⼀个问题，从 view组件到远程异步加载组件再到实际业务组件通信⼀共三层，中间层远程异步组件作为公共组件不可被修改，需要 view组件直接向实际业务组件通信。vuex 和 eventBus ⽅案都过于繁琐，这⾥我们采⽤ $attrs 和$listeners(vue v2.4+), 来实现 “fallthrough”（vue组件跨层级通信）。
// 修改 sync-component.vue 组件
// 新增 v-bind="$attrs" v-on="$listeners"
<component
:is="mode"
v-bind="$attrs"
v-on="$listeners">
</component>
// inheritAttrs: true
export default {
name: 'SyncComponent',
props: {
// ⽗组件提供请求地址
url: {
type: String,
default: ''
}
},
inheritAttrs: true
... 以下省略千军万码
}
远端代码如何复⽤框架中已引⼊的库
我们不希望看到远端组件和框架中存在较⼤库或插件的重复的引⼊，这部分内容尚处在实践阶段，主要思路是把公共库挂载到Vue原型链上实现组件公共复⽤ Vue.prototype.$xxx。
// 全局添加 axios 对象
import axios from 'axios';
Vue.prototype.$http = axios;
引⼊的远程组件可以访问到框架中的公共包了，这时候还需要配置 webpack 使远程组件打包时不要包含公共包的代码。
// webpack.f.js 添加
externals: {
vue: 'vue',
'element-ui': 'element-ui',
axios: 'axios'
}
避免因远端代码被类似 v-for 多次调⽤导致的不必要请求。
这部分我们直接⽤⼀个全局变量做字典，存储以请求地址：数据为⼦项的数组。
async mounted() {
if (!this.url) return;
// Cache 缓存根据 url 参数
if (!window.SyncComponentCache) {
window.SyncComponentCache = {};
}
let res;
if (!window.SyncComponentCache[this.url]) {
window.SyncComponentCache[this.url] = (this.url);
res = await window.SyncComponentCache[this.url];
} else {
res = await window.SyncComponentCache[this.url];
}
let Fn = Function;
console.de);
}
⾄此，异步远程组件就可以加载并和框架进⾏通信了。
本⽂中的源码请访问获取，组件已经发布到上，可以直接安装。
总结
以上所述是⼩编给⼤家介绍的加载 vue 远程代码的组件，希望对⼤家有所帮助，如果⼤家有任何疑问请给我留⾔，⼩编会及时回复⼤家的。在此也⾮常感谢⼤家对⽹站的⽀持！

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。