iPhone Safari运行JS模块报Unexpected identifier 'getProject'错如何解决

问题根因 #

• 第一个语法错误是因为iOS 14及更早版本的Safari不支持ES模块的顶级await特性，你直接在type="module"的script顶层写await语句，旧版iOS Safari无法识别，就会抛出标识符解析错误。
• 第二个Vue报错是因为你把await逻辑放入async立即执行函数后，projectData被声明为函数内部的局部变量，外部的Vue实例无法访问到该变量，因此初始化时会提示未定义。

修复方案 #

把Vue实例的初始化逻辑也一并放入async立即执行函数内部，确保Vue初始化时已经拿到异步请求的projectData，同时不会出现顶级await的语法兼容问题，修改后代码如下：

<script async type="module">
import {projectCode} from "./assets/js/config.js";
import {getProject} from "./assets/js/saleproject.js";
import {getAccount} from "./assets/js/account.js";
import Vue from 'https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.esm.browser.js'

(async function () {
    // 异步获取项目数据
    const projectData = await getProject(projectCode);
    // 内部初始化Vue，可直接访问拿到的projectData
    new Vue({
        el: '#app',
        data() {
            return {
                projectData: projectData,
                // 其余你的原有data配置
            }
        },
        // 其余你的原有Vue配置：methods、filters、mounted等逻辑
    })
}())
</script>

该写法兼容所有支持ES模块的浏览器，覆盖所有主流iPhone设备的系统版本，不会再出现兼容报错。

内容的提问来源于stack exchange，提问作者ImranR