时间戳

首页 > 解决方案 > 我可以在需要支持 IE 的遗留项目中使用 Vue + Vuetify 吗？

javascript - 我可以在需要支持 IE 的遗留项目中使用 Vue + Vuetify 吗？

问题描述

目前正在向遗留项目添加一些功能。前端只是所有网页的 jquery。我被告知要添加另一个网页，并且由于请求的复杂功能而真的想使用 Vuetify + Vue……没有 webpack 或我们今天拥有的任何不错的功能，这对我来说有点挫折，但是我只会使用CDN。

我遇到的问题是需要支持 IE（用户请求）。目前，这些脚本标签可以让 Chrome 中的一切正常工作：

<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.24.0/babel.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-resource@1.5.1"></script>
<link href='https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons' rel="stylesheet">
<script  src="https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.js"></script>
<link href="https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.min.css" rel="stylesheet">
<jsp:include page="components/location_component.jsp"></jsp:include>

如何仅使用 CDN 使其在 IE 中工作？我遇到了关于 ES6 语法的错误，这就是我引入 babel 的原因。仍然得到与以前相同的错误。

    <div id="app">
        <v-app> 
            <v-container> 
                <location @workstationchange="handleWorkstationChange($event)"></location> 

            </v-container> 
        </v-app>
    </div>
</div>

<script>
    var app = new Vue({
        el : '#app',
        data : {
            workstationSelected : null,
        },
        methods : {
            handleWorkstationChange : function(id) {
                this.workstationSelected = id
            }
        },
        mounted: function(){

        }
    })
</script>

位置是我创建的一个相当长的组件，但它只是有一些从数据库中填充的下拉菜单......没什么太复杂的。它使用 ES6 箭头函数、排序、Set()、展开运算符 [...] 等...试图使这篇文章保持简短。

任何人都知道如何通过仅使用 CDN 让 ES6 在与 IE 兼容的传统环境中工作？我究竟做错了什么？

标签： javascriptvue.jsecmascript-6babeljsvuetify.js

解决方案

您可以使用支持 IE11 的 Vuetify。

要在无法利用 Webpack 等构建工具的遗留项目中使用它，您可以在遗留项目之外构建项目，然后使用 Webpack 等构建工具来构建项目。然后，您可以将 Webpack 输出的 Javascript 文件（通常是 /dist/build.js）导入到您的遗留项目中，例如：

<script src="build.js" />

您还需要将您在 Vue 项目中使用的任何资产转移到旧项目中。

虽然非常规，但它确实有效，并且还可以利用您项目中现有的 Javascript 和 Web 服务，就好像它一开始就在那里一样。

推荐阅读