全国咨询热线:18720358503

小程序自助开发工具_加载 vue 长途代码的组件实

类别:行业新闻 发布时间:2021-01-11 浏览人次:

加载 vue 远程代码的组件实例详解     投稿:mrr   vue-cli 作为 Vue 官方推荐的项目构建脚手架,它提供了开发过程中常用的,热重载,构建,调试,单元测试,代码检测等功能。我们本次的异步远端组件将基于 vue-cli 开发

在我们的 vue 项目中(特别是后台系统),总会出现一些需要多业务线共同开发同一个项目的场景,如果各业务团队向框架中提供一些私有的展示组件,但是这些组件并不能和框架一起打包,因为框架不能因为某个私有模块的频繁变更而重复构建发布。在这种场景下我们需要一个加载远程异步代码的组件来完成将这些组件加载到框架中。

vue-cli 作为 Vue 官方推荐的项目构建脚手架,它提供了开发过程中常用的,热重载,构建,调试,单元测试,代码检测等功能。我们本次的异步远端组件将基于 vue-cli 开发。

需求分析

如何加载远端的代码 如何注册加载后的代码到框架中。 父组件如何和远端引入的组件通信。 远端代码如何复用框架中已引入的库。 避免因远端代码被类似 v-for 多次调用导致的不必要请求。

加载远端代码

远端代码应该存储在一个可访问的 URL 上,这样我们通过 Axios 类似的 HTTP client 请求这个链接拿到源码。

import Axios from 'axios';
export default {
 name: 'SyncComponent',
 pro凡科抠图: {
 // 父组件提供请求地址
 url: {
 type: String,
 default: ''
 data() {
 return {
 resData: ''
 async mounted() {
 if (!this.url) return;
 const res = await Axios.get(this.url); // 我们在组件挂载完成时,请求远端代码并存储结果。
 this.resData = res.data;
};

以上是基础代码 为了方便 一下例子中 我将省略重复的代码部分。

注册代码到框架中

这部分有些繁琐,涉及到多个问题:

浏览器并不支持 .vue 模板 或 ES.next 语法,模块需要编译后才可以使用。

处理这部分比较简单,我们自己定义一个webpack配置文件来打包这些模板。

// 在 build 目录下新建 ponents.prod.conf.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)
module.exports = {
 // 此处引入要打包的组件
 entry: {
 componentA: resolve('/ponent-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',
 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({
 'process.env.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 = await Axios.get(this.url);
 let Fn = Function;
 this.mode = new Fn(`return ${res.data}`)();
}

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组件跨层级通信)。

// ponent.vue 组件
// 新增 v-bind="$attrs" v-on="$listeners"
 component
 :is="mode"
 v-bind="$attrs"
 v-on="$listeners" 
 /component 
// inheritAttrs: true
export default {
 name: 'SyncComponent',
 pro凡科抠图: {
 // 父组件提供请求地址
 url: {
 type: String,
 default: ''
 inheritAttrs: true
 ... 以下省略千军万码
}

远端代码如何复用框架中已引入的库

我们不希望看到远端组件和框架中存在较大库或插件的重复的引入,这部分内容尚处在实践阶段,主要思路是把公共库挂载到Vue原型链上实现组件公共复用 Vue.prototype.$xxx。

// 全局添加 axios 对象
import axios from 'axios';
Vue.prototype.$http = axios;

引入的远程组件可以访问到框架中的公共包了,这时候还需要配置 webpack 使远程组件打包时不要包含公共包的代码。

// ponents.prod.conf.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] = Axios.get(this.url);
 res = await window.SyncComponentCache[this.url];
 } else {
 res = await window.SyncComponentCache[this.url];
 let Fn = Function;
 this.mode = new Fn(`return ${res.data}`)();
 console.log(this.mode);
}

至此,异步远程组件就可以加载并和框架进行通信了。

本文中的源码请访问 获取,组件已经发布到上,可以直接安装。

总结

以上所述是小编给大家介绍的加载 vue 远程代码的组件,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对凡科网站的支持!


推荐阅读

小程序自助开发工具_加载 vue 长途代码的组件实

载入 vue 远程控制编码的部件案例详细说明 文章投稿:mrr vue-cli 做为 Vue 官方网强烈推荐的新项目搭建脚手架,它出示了开发设计全过程中常会用的,热轻载,搭建,调节,模块检...

2021-01-11
广州网络公司外贸企业网站推行引流的7种有用方

重要词:广州市互联网企业出口外贸公司网站实行引流方法的7种有效方式 现有 1505 人访问 很多出口外贸型公司都是有英语公司官方网站,但大部分分却沒有非常好充分发挥其功效,如同...

2021-01-11
深圳网站建设说明怎么做好营销型网站建设方案

针对各家公司来讲,赢利是其存活和发展趋势的基本标准,也是最终总体目标,其全部的工作中全是以便赢利。企业网站建设当然都不列外,具有高转换率、高客户感受度、高公信度、...

2021-01-11
(知识)云服务器的概念和云服务器的技术优势

(专业知识)云服务器器的定义和云服务器器的技术性优点 :00 访问数:中国许多有整体实力的大企业建立网站基本建设时,优选的服务器空间是应用云服务器器。那麼,什么叫云服务...

2021-01-11
广州凡科互联网科技股份有限公司招聘双休/售后

招聘人数:13职位信息工作要求:拥有互联网行业(百度、阿里巴巴,优化,258,南方网通、筑巢、微信小程序等)(广告)行业销售经验,优先录取。1、负责正式合作客户的培训与维...

2021-01-11
广州凡科互联网科技股份有限公司招聘行业运营

招聘人数:18职位信息岗位职责:1、基于全链路体验分析及业务发展,根据客户体验规划和设计行业服务解决方案2、结合客户体验监控痛点问题,联动各业务部门推动规则、产品、流程优...

2021-01-11
X

400-8700-61718720358503
企业邮箱2639601583@qq.com
官方微信