V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
V2EX 提问指南
LeeReamond
V2EX  ›  问与答

问个问题, Vue 能否实现动态地以 html 的方式加载 js 文件?

  •  
  •   LeeReamond · 2021-03-02 06:49:30 +08:00 · 1220 次点击
    这是一个创建于 1362 天前的主题,其中的信息可能已经有所发展或是发生改变。

    如题,现在有一个需求是,在网上找到一段 js 文件实现的动画,想把这段动画贴到 404 页面中。

    在普通的 html 页面里,使用<script src=""></script> 这种引用方式,单独引用这个绑定到某网址的 js 文件,就可以使这段动画生效。

    但是 Vue 里不支持在单独组件里添加<script>标签,vue 的方式是你可以直接导入 js 代码到组件里。但是这样一来如果以后动画越加越多(假设都以这种方式追加),那么会导致页面的 js 和 css 代码无限增大,新用户每次加载网页时都要加载很长时间。

    还有一种添加 script 标签的方式是修改 vue 的 index.html 文件,不过这样显然就全局都有了,不是单独到某页面时才会加载这个文件的。问一下大家,vue 有办法实现访问某路由时动态地从服务器请求一段 js 并执行吗?

    ===================

    另外想到,似乎用 xmlrequest 的方式可以请求代码,并且用某种方式执行,但是这是否会产生安全问题?

    6 条回复    2021-03-02 11:13:41 +08:00
    devld
        1
    devld  
       2021-03-02 07:04:33 +08:00 via Android   ❤️ 1
    document.createElement('script')

    然后动态 appendChind 到 body 中,组件销毁时,再 remove 掉
    LeeReamond
        2
    LeeReamond  
    OP
       2021-03-02 07:36:37 +08:00
    @devld 感谢,测试成功了。
    murmur
        3
    murmur  
       2021-03-02 08:03:07 +08:00
    当然可以,webpack 的分卷动态加载就这么实现的,干嘛自己做,这都是标准实现,webpack2 以上就可以做了
    learnshare
        4
    learnshare  
       2021-03-02 09:17:02 +08:00
    不知道大家在上手前端的时候,还会不会 HTML/CSS/JS/DOM 起步了

    Vue 中动态地按原始方式加载 JS,不就是在 Vue 中合适的地方以 DOM 方式添加 /删除 script 元素么,如 #1
    LeeReamond
        5
    LeeReamond  
    OP
       2021-03-02 10:07:02 +08:00
    @learnshare 显然不会了,多年前用 jquery 写过东西,最近有前端工作要做上来就是学 vue 了,两者生产力水平不能比
    learnshare
        6
    learnshare  
       2021-03-02 11:13:41 +08:00
    @LeeReamond 但 Vue 只是个组件化的开发工具。不从基础学起的话,写什么都摸不着头脑吧
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2652 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 27ms · UTC 05:11 · PVG 13:11 · LAX 21:11 · JFK 00:11
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.