vue项目在iOS safari浏览器上打不开，显示为空白？

亲凌奕

3521324

发布于
2017-11-17

Tranch

70872028

更新于
2018-02-04

在Chrome浏览器、mac Safari可以正常显示

项目使用vue脚手架搭建，vue版本2.5.2、webpack版本3.6.0、iOS系统8.2

通过移动端调试工具safari浏览器错误日志显示为：
SyntaxError: Unexpected keyword 'const'. Const declarations are not supported in strict mode.

通过日志提示判断可能是因不支持es6语法导致

.babelrc配置如下（项目自带配置）

{
    "presets": [
        ["env", {
            "modules": false
        }],
        "stage-2"
    ],
    "plugins": ["transform-runtime"],
    "env": {
        "test": {
            "presets": ["env", "stage-2"]
        }
    }
}

此处已支持转化为es5 (babel-preset-es2015 已更新为 babel-preset-env)

如哪位大神遇到此类问题，还望指教

ecmascript-6 javascript vue.js

阅读 21k

7 个回答

得票最新

superfff

1678

发布于
2017-11-28

✓ 已被采纳

请问楼主这个问题解决了吗?
我感觉是webpack-dev-server 这个的问题.

joy钰

9.1k53031

发布于
2017-11-17

你的babel-loader可能没有对一些文件进行转换。找找看你出错代码是哪个文件里的，在babel-loader把它inlucde进来。

笑语

发布于
2017-11-24

更新于
2017-11-24

新手上路，请多包涵

刚遇到也没解决
chrome正常但是safari 和模拟器看不到东西
而且 cnpm run dev 后是> webpack-dev-server --inline --progress --config build/webpack.dev.conf.js

safari 错误

package.json

{
    "name": "memsys",
    "version": "1.0.0",
    "description": "sw",
    "author": "cuihongkai <hongkaicui@zlshanglv.com>",
    "private": true,
    "scripts": {
        "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
        "start": "npm run dev",
        "build": "node build/build.js"
    },
    "dependencies": {
        "mint-ui": "^2.2.11",
        "node-sass": "^4.7.2",
        "vue": "^2.5.2",
        "vue-router": "^3.0.1",
        "vue-svg-icon": "^1.2.9"
    },
    "devDependencies": {
        "autoprefixer": "^7.1.2",
        "babel-core": "^6.22.1",
        "babel-loader": "^7.1.1",
        "babel-plugin-transform-runtime": "^6.22.0",
        "babel-preset-env": "^1.3.2",
        "babel-preset-stage-2": "^6.22.0",
        "babel-register": "^6.22.0",
        "chalk": "^2.0.1",
        "copy-webpack-plugin": "^4.0.1",
        "css-loader": "^0.28.0",
        "sass-loader": "^6.0.0",
        "eventsource-polyfill": "^0.9.6",
        "extract-text-webpack-plugin": "^3.0.0",
        "file-loader": "^1.1.4",
        "friendly-errors-webpack-plugin": "^1.6.1",
        "html-webpack-plugin": "^2.30.1",
        "webpack-bundle-analyzer": "^2.9.0",
        "node-notifier": "^5.1.2",
        "postcss-import": "^11.0.0",
        "postcss-loader": "^2.0.8",
        "semver": "^5.3.0",
        "shelljs": "^0.7.6",
        "optimize-css-assets-webpack-plugin": "^3.2.0",
        "ora": "^1.2.0",
        "rimraf": "^2.6.0",
        "url-loader": "^0.5.8",
        "vue-loader": "^13.3.0",
        "vue-style-loader": "^3.0.1",
        "vue-template-compiler": "^2.5.2",
        "portfinder": "^1.0.13",
        "webpack": "^3.6.0",
        "webpack-dev-server": "^2.9.1",
        "webpack-merge": "^4.1.0"
    },
    "engines": {
        "node": ">= 4.0.0",
        "npm": ">= 3.0.0"
    },
    "browserslist": [
        "> 1%",
        "last 2 versions",
        "not ie <= 8"
    ]
}