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

【问题标题】：Can I use Vue + Vuetify in legacy project that needs to support IE?我可以在需要支持 IE 的遗留项目中使用 Vue + Vuetify 吗？
【发布时间】：2019-05-13 21:13:58
【问题描述】：

目前正在向旧项目添加一些功能。前端只是所有网页的 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>

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

有人知道如何通过仅使用 CDN 来让 ES6 在与 IE 兼容的 Legacy 环境中工作吗？我做错了什么？

【问题讨论】：

要使用 babel，您需要某种将 ES6 代码转换为 ES5（或更早版本，您没有指定 IE 版本）的构建过程。
IE 11 是版本。我对 babel 了解不多，能否详细说明一下这个构建过程？
Babel 设置页面有很多不同构建过程的示例。例如，您可以使用 webpack 或者您可以设置 WebStorm 将 ES6 编译为 ES5。 babeljs.io/setup
好吧，我不能使用 webpack，因为这是一个遗留项目。我的工作也不允许我使用 WebStorm。它们只允许 Eclipse，因此这两个选项都不在讨论范围内。我实际上只有一个带有 Vue + Vuetify + Babel 脚本的 JSP 文件。当我使用独立的 babel cdn 并添加 <script type="text/babel"> 时，它会在派生自 Vuetify CDN 的名为 lang.ts 的文件中引发异常。错误出现在这行代码const fallback = Symbol('Lang fallback') 上，并说“符号”未定义。这只发生在 Internet Explorer 中。
对不起，我没有意识到你可以在运行时加载Babel！学到了一些新东西:)。IE不支持Symbol是正确的，你可以在这里看到：developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…。我认为 Babel 不会转译所有 Vue CDN 代码！所以这就是你的问题所在。

标签： javascript vue.js ecmascript-6 babeljs vuetify.js

【解决方案1】：

您可以使用支持 IE11 的 Vuetify。

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

<script src="build.js" />

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

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

【讨论】：

非常感谢，这是一个非常有创意的方法