VueJs 3 + Vuetify:不适用于 IE 和 Edge
VueJs 3 + Vuetify: Not working in IE and Edge
我不确定自己做错了什么。我有 VueJs 3 和 Vuetify。在 Chrome 和 Firefox 上运行良好,但在 IE 和 Edge 中无法加载。我正在尝试使用 Babel 加载 polyfill 并强制 Vue CLI 为 Vuetify 转换依赖项。
package.json
"babel": {
"presets": [
[
"@babel/preset-env",
{
"useBuiltIns": "entry"
}
]
]
}
vue.config.js
module.exports: {
transpileDependencies: ['vuetify']
}
main.ts
import 'core-js/es6';
import 'regenerator-runtime/runtime';
导入内容包含在我的 main.ts 文件的顶部。我一直在使用官方文档来设置它。
我在这里错过了什么?
我最终只是删除了 Vuetify(我只使用了其中一个很容易替换的功能)并使用了 babel polyfill cdn。可能不是最好的解决方案,但现在可以使用了。
如果您使用 vue-cli 创建项目并使用 vue add vuetify
添加 vuetify,那么使其在 Edge 中工作的解决方案应该是将 transpileDependencies: ['vuetify']
添加到 vue.config.js 文件.
但在我的例子中,我将 vue/vuetify 添加到一个已经存在的项目中,并且没有使用 vue-cli。所以为了让它工作,我安装了 core-js npm install core-js@2 --save
并将其添加到我的 webpack.config.js
中的规则中
{
test: /\.js$/,
exclude: /node_modules\(?!(vuetify)).*/,
use: [
{
loader: 'babel-loader',
options: {
configFile: './babel.config.js',
}
}
]
}
然后我将 babel.config.js 文件添加到项目的根目录。
module.exports = {
presets: [
['@babel/preset-env', {
debug: true,
useBuiltIns: 'usage',
corejs: { "version": 2, "proposals": true }
}],
],
plugins: [
'@babel/plugin-proposal-object-rest-spread',
'@babel/plugin-transform-spread',
]
}
回复晚了一点,但我在其他任何地方都找不到这个解决方案,这是我自己搜索时最先出现的 post 之一。所以我想我会 post 对我有用的东西。
我不确定自己做错了什么。我有 VueJs 3 和 Vuetify。在 Chrome 和 Firefox 上运行良好,但在 IE 和 Edge 中无法加载。我正在尝试使用 Babel 加载 polyfill 并强制 Vue CLI 为 Vuetify 转换依赖项。
package.json
"babel": {
"presets": [
[
"@babel/preset-env",
{
"useBuiltIns": "entry"
}
]
]
}
vue.config.js
module.exports: {
transpileDependencies: ['vuetify']
}
main.ts
import 'core-js/es6';
import 'regenerator-runtime/runtime';
导入内容包含在我的 main.ts 文件的顶部。我一直在使用官方文档来设置它。
我在这里错过了什么?
我最终只是删除了 Vuetify(我只使用了其中一个很容易替换的功能)并使用了 babel polyfill cdn。可能不是最好的解决方案,但现在可以使用了。
如果您使用 vue-cli 创建项目并使用 vue add vuetify
添加 vuetify,那么使其在 Edge 中工作的解决方案应该是将 transpileDependencies: ['vuetify']
添加到 vue.config.js 文件.
但在我的例子中,我将 vue/vuetify 添加到一个已经存在的项目中,并且没有使用 vue-cli。所以为了让它工作,我安装了 core-js npm install core-js@2 --save
并将其添加到我的 webpack.config.js
{
test: /\.js$/,
exclude: /node_modules\(?!(vuetify)).*/,
use: [
{
loader: 'babel-loader',
options: {
configFile: './babel.config.js',
}
}
]
}
然后我将 babel.config.js 文件添加到项目的根目录。
module.exports = {
presets: [
['@babel/preset-env', {
debug: true,
useBuiltIns: 'usage',
corejs: { "version": 2, "proposals": true }
}],
],
plugins: [
'@babel/plugin-proposal-object-rest-spread',
'@babel/plugin-transform-spread',
]
}
回复晚了一点,但我在其他任何地方都找不到这个解决方案,这是我自己搜索时最先出现的 post 之一。所以我想我会 post 对我有用的东西。