问题
成都创新互联公司-专业网站定制、快速模板网站建设、高性价比衡阳县网站开发、企业建站全套包干低至880元,成熟完善的模板库,直接使用。一站式衡阳县网站制作公司更省心,省钱,快速模板网站建设找我们，业务覆盖衡阳县地区。费用合理售后完善，十余年实体公司更值得信赖。
在我们的 vue 项目中（特别是后台系统），总会出现一些需要多业务线共同开发同一个项目的场景，如果各业务团队向项目中提供一些公共业务组件，但是这些组件并不能和项目一起打包，因为项目中不能因为某个私有模块的频繁变更而重复构建发布。
^_^不建议在生产环境使用，代码包含eval
思路
在这种场景下我们需要将公共的业务组件部署到服务端，由客户端请求并渲染组件。
服务端解析.vue文件
使用vue-template-compiler 模板解析器，解析SFC（单文件组件）
const compile = require('vue-template-compiler')
// 获取sfc组件的源码
const str = fs.readFileSync(path.resolve(__dirname, `../components/sfc.vue`), 'utf-8')
// vue-loader内置，现在用来解析SFC（单文件组件）
let sfc = compile.parseComponent(str)
// 获取sfc组件配置
let sfcOptions = getComponentOption(sfc)
getComponentOption 获取sfc组件配置
import { uuid } from 'utilscore'
import stylus from 'stylus'
import sass from 'sass'
import less from 'less'
const getComponentOption = sfc => {
// 生成data-u-id
const componentId = uuid(8, 16).toLocaleLowerCase()
// 标签添加data-u-id属性
const template = sfc.template ? tagToUuid(sfc.template.content, componentId) : ''
// 转化style（less、sass、stylus）
let styles = []
sfc.styles.forEach(sty => {
switch (sty.lang) {
case 'stylus':
stylus.render(sty.content, (err, css) => styles.push(formatStyl(sty, css, componentId)))
break;
case 'sass':
case 'scss':
styles.push(formatStyl(sty, sass.renderSync({ data: sty.content }).css.toString(), componentId))
break;
case 'less':
less.render(sty.content, (err, css) => styles.push(formatStyl(sty, css, componentId)))
break;
}
})
let options = {
script: sfc.script ? $require(null, sfc.script.content) : {},
styles,
template
}
return JSON.stringify(options, (k, v) => {
if(typeof(v) === 'function') {
let _fn = v.toString()
return /^function()/.test(_fn) ? _fn : fn.replace(/^/,'function ')
}
return v
})
}tagToUuid 给template 中的标签追加data-u-id
const tagToUuid = (tpl, id) => {
var pattern = /<[^\/]("[^"]*"|'[^']*'|[^'">])*>/g
return tpl.replace(pattern, $1 => {
return $1.replace(/<([\w\-]+)/i, ($2, $3) => `<${$3} data-u-${id}`)
})
}formatStyl 处理样式的scoped
const formatStyl = (sty, css, componentId) => {
let cssText = css
if (sty.scoped) {
cssText = css.replace(/[\.\w\>\s]+{/g, $1 => {
if (/>>>/.test($1)) return $1.replace(/\s+>>>/, `[data-u-${componentId}]`)
return $1.replace(/\s+{/g, $2 => `[data-u-${componentId}]${$2}`)
})
}
return cssText
}
$require 执行其中的的 JavaScript 代码，并返回值
const $require = (filepath, scriptContext) => {
const filename = path.resolve(__dirname, `../${filepath}`);
const module = { exports: {} }
let code = scriptContext ? scriptContext : fs.readFileSync(filename, 'utf-8')
let exports = module.exports
code = `(function($require,module,exports,__dirname,filename){$[code]})($require,module,exports,__dirname,filename)`
eval(code)
return module.exports
} 客户端请求组件并渲染
封装前端远程组件-remote.vue
远程组件实践
服务端sfc组件，注意javascript块要使用module.exports导出，引入脚本使用$require
客户端渲染
// temolate
// script
methods:{
handleClick(v){
console.log(v) // 点我 }
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持创新互联。
文章题目：vue远程加载sfc组件思路详解
地址分享：
http://cdkjz.cn/article/gogsih.html
