使用script 标签type=“module”出现跨域的问题解决html文件使用import JS代码出现跨域了怎么

在学习编码过程中，html文件引入javascript 文件方式有多种，常用写法就是 script 的src属性，

<script src="javascript.js"></script>

但在平时的前端开发中，一般使用前端框架开发，更多使用import、export 模块的导入导出，实现js代码的引用；

export const city = '深圳';

同样，如果使用script标签 type="module"，也是可以import引入.js逻辑，

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">ss</div>
    <script type="module">
        import {city} from "./index.js";
        document.querySelector('#app').innerText = `打印：${city}`
    </script>
    
</body>
</html>

问题

但这样使用会出现问题，在浏览器打开html 发现不能正常显示内容，控制台显示跨域

看到跨域提示，意识到应该起一个服务，使得本地文件能正常访问，

解决

vscode编辑器安装Live Server插件可以快速解决；

然后在编辑器下方点击启动服务，就可以正常访问页面了

这样就可以正常编写代码了；