问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

vue服务端渲染时，如何动态执行下发的字符串脚本？

头像
牛头
    10611534

    配置的下发脚本如下，在客户端渲染时可以通过 importmap 执行。但是在服务端渲染时，如何处理第三方引入的依赖，以及如何转化成可执行的代码

    配置时：

    import _ from 'lodash';
import axios from 'axios';

export default async function(ctx) {
    const bb = axios;
    console.log(bb);
    return _
}

    拿到的配置数据是字符串

    "import lodash from 'lodash'\n import axios from 'axios';\n export default async function(ctx) {\n    const bb = axios;\n    console.log(bb);\n    return _;\n}\n"
    vue.js前端ssrnode.jsreact
    阅读 798
    avatarAI BotBETA

    在服务端渲染时，可以使用vm模块的runInThisContext方法来动态执行下发的字符串脚本。具体步骤如下：

    1. 首先，将收到的字符串脚本转化成可执行的代码。可以使用Function构造函数来将字符串转化成一个动态函数对象。
    const scriptCode = "import lodash from 'lodash';\nimport axios from 'axios';\nexport default async function(ctx) {\n    const bb = axios;\n    console.log(bb);\n    return _;\n}";

const scriptFn = new Function('return ' + scriptCode)();
    1. 接下来，使用vm模块的runInThisContext方法，在当前上下文中动态执行脚本。需要注意的是，在执行脚本之前，需要提前在vm模块中注入第三方库的依赖。
    const vm = require('vm');
const lodash = require('lodash');
const axios = require('axios');

const sandbox = {
  lodash,
  axios,
  console
};

const context = vm.createContext(sandbox);
const scriptResult = vm.runInContext(scriptFn.toString(), context);
    1. 执行完毕后，scriptResult就是脚本的返回结果，可以根据实际需要进行处理和使用。

    以上是在服务端渲染时动态执行下发的字符串脚本的方法。

    撰写回答
    你尚未登录，登录后可以
    • 和开发者交流问题的细节
    • 关注并接收问题和回答的更新提醒
    • 参与内容的编辑和改进，让解决方法与时俱进
    推荐问题