Vue-cli 新建的项目如何兼容ie9、ie10
发布于 2 个月前 作者 huaer 206 次浏览 来自 问答
粉丝福利 : 关注VUE中文社区公众号,回复视频领取粉丝福利

现在用vue-cli构建的项目直接安装的是vue2.5.2 webpack3.6 ,本地npm run dev 运行后再ie9 和ie10上是打不开的,控制台只出现了一个语法错误的提示!实在没找到解决方法,在此寻找个解决方案,十分感谢各位大佬来献计

19 回复

肿么可能呢……你的代码发一下看看

我现在也是这个问题,解决了吗

就是用vue-cli 直接新建的vue项目,其他的什么都没加,官方的启动页都没改,在ie9 ,ie10上就报这个错!同样的我的另一个老项目以前建的是没有问题的

Chrome、Firefox 没问题?

在Chrome、Firefox并没有任何问题,ie11上都是可以打开的 ie9 、ie10 就已经不行了

能看一下app.js报错的地方吗?这样看根本找不出问题的

你不是 vue init 之后什么都没改吗

实际就是我本地运行时es6没有被编译成es5 但是我的配置和老项目一样 ,我也试过加es2015了,但是结果一样js未被重编译 截图中可以看出const 、let 等es6语法没有重编译 有哪位指点下webpack的配置问题

以下是我的部分配置信息

webpack…base.conf.js 配置信息

module: {
rules: [
…(config.dev.useEslint? [{
test: /.(js|vue)$/,
loader: ‘eslint-loader’,
enforce: ‘pre’,
include: [resolve(‘src’), resolve(‘test’)],
options: {
formatter: require(‘eslint-friendly-formatter’),
emitWarning: !config.dev.showEslintErrorsInOverlay
}
}] : []),
{
test: /.vue$/,
loader: ‘vue-loader’,
options: vueLoaderConfig
},
{
test: /.js$/,
loader: ‘babel-loader’,
include: [resolve(‘src’), resolve(‘test’)]
},
{
test: /.(png|jpe?g|gif|svg)(?.)?$/,
loader: ‘url-loader’,
options: {
limit: 10000,
name: utils.assetsPath(‘img/[name].[hash:7].[ext]’)
}
},
{
test: /.(mp4|webm|ogg|mp3|wav|flac|aac)(?.
)?$/,
loader: ‘url-loader’,
options: {
limit: 10000,
name: utils.assetsPath(‘media/[name].[hash:7].[ext]’)
}
},
{
test: /.(woff2?|eot|ttf|otf)(?.*)?$/,
loader: ‘url-loader’,
options: {
limit: 10000,
name: utils.assetsPath(‘fonts/[name].[hash:7].[ext]’)
}
}
]
}

.babelrc 配置信息

{
“presets”: [
[“env”, {
“modules”: false
}],
“stage-2”
],
“plugins”: [“transform-runtime”],
“env”: {
“test”: {
“presets”: [“env”, “stage-2”],
“plugins”: [“transform-es2015-modules-commonjs”, “dynamic-import-node”]
}
}
}

zxyRealm:

我的

也遇到了这个问题。build之后的项目跑起来是没有问题的。检查之后发现是devServer中部分es6没有编译的问题

确实是webpack-dev-server的锅,我的解决方式是找到 /node_modules/webpack-dev-server 下的client文件夹用老项目的文件替换掉这个文件就可以了,就是这个文件里的js用了es6语法导致的! 如果有更好的解决方案可以分享的,我的方式只是比较强硬的解决了问题,但是感觉这个方式容易出问题! 多谢给出的提示!

感觉是ie9一些低版本的高级浏览器对es6新语法并不支持。
可以试试办法:npm install --save-dev babel-polyfill
babel-polyfill正确安装后,main.js里引用:import “babel-polyfill”;

就是没改啊!我也试过build之后会编译es6语法能够在ie9、10上运行,npm run dev 就不会编译es6,感觉是webpack3.0 之后版本配置方法改了,这个开发起来不好本地测试啊

把那段 eval 字符串拆出来写成 JS 让 IE 加载试试,看看到底是哪里有语法问题。

Webpack Dev Server 官方已经放弃了旧版浏览器的支持,所以要么回滚到 webpack-dev-server@2.7.1 要么放弃旧版浏览器。

github.com/webpack/webpack-dev-server

Issue: package files should not contain es6 syntax “const”

opened by MarvinXu on 2017-11-01
closed by shellscape on 2017-11-01

Operating System: window 7 x64 Node Version: v6.10.2 NPM Version: 3.10.10 webpack Version: 2.5.1 webpack-dev-server Version: 2.9.3

This is a bug This is a feature…

wontfix

能具体说一下替换哪个文件吗?

我貌似遇到类似的问题,谷歌、火狐正常运行,ie的话axios貌似不支持(而且里面的then貌似是es6,不知道ie支持不),大伙有什么方法解决没

并不是webpack配置问题。也不是babel没编译。

这个锅其实是 webpack-dev-server的问题。它里面通过socket给浏览器的代码有 部分 es6的代码 如 const 这些。然后这种东西ie11以下并不认识
翻了webpack-dev-server的源码

github.com

webpack/webpack-dev-server/blob/master/client/index.js#L27

const scriptElements = document.scripts || [];
const currentScript = scriptElements[scriptElements.length - 1];
if (currentScript) { return currentScript.getAttribute('src'); }
// Fail as there was no script to use.
throw new Error('[WDS] Failed to get current script source.');
}


let urlParts;
let hotReload = true;
if (typeof window !== 'undefined') {
const qs = window.location.search.toLowerCase();
hotReload = qs.indexOf('hotreload=false') === -1;
}
if (typeof __resourceQuery === 'string' && __resourceQuery) {
// If this bundle is inlined, use the resource query to get the correct url.
urlParts = url.parse(__resourceQuery.substr(1));
} else {
// Else, get the url from the <script> this file was called with.
let scriptHost = getCurrentScriptSource();
// eslint-disable-next-line no-useless-escape
scriptHost = scriptHost.replace(/\/[^\/]+$/, '');
回到顶部