在vue里面使用eval_vue 远程加载sfc组件思路__Vue.js

问题

在我们的 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) {

cas