1、问题描述：

其一、报错为：

Uncaught SyntaxError: Cannot use import statement outside a module;

中文为：

未捕获的语法错误：无法在模块外部使用 import 语句;

其二、问题描述为：

在项目打包的时候 npm run build，没有报错，页面也正常显示，但在浏览器调试的时候 F12 报错;

其三、控制台页面、浏览器页面、F12 控制台页面为：

// 控制台执行没有问题；

// 浏览器页面、F12 控制台页面：

// 出错的地方是: main.js 文件报错：

2、问题分析：

根据 F12 控制台报错的提示：无法在模块外部使用 import 语句，应该是引入或设置 main.js 出现了问题;

3、问题解决：

其一、发现并解决问题：

A、在 index.html 页面中引入了浏览器不能直接解析的东西(即：页面是不能直接识别这个 index.html 文件中的 main.js 中的 import 这些东西，需要 webpack 去打包等解析)

B、直接去掉 <script src="./src/main.js"></script> 的引入，而引入 <script src="./bundle.js"></script> 代码，因为：webpack 打包解析形成的 bundle.js 文件已经将 main.js 文件成功解析并放在了 bundle.js 文件里(即：此时引入的 main.js 文件是多余的，页面浏览器是不支持 ES6 的 import 和export语法；)；

其二、修改代码的页面为：

// 去掉 <script src="./src/main.js"></script> 代码即可;

4、小结：

其一、哪里有不对或不合适的地方，还请大佬们多多指点和交流！
其二、若有转发或引用本文章内容，请注明本博客地址(直接点击下面 url 跳转) https://blog.csdn.net/weixin_43405300,创作不易，且行且珍惜！
其三、有兴趣的话，可以多多关注这个专栏(Vue(Vue2+Vue3)面试必备专栏)(直接点击下面 url 跳转)：https://blog.csdn.net/weixin_43405300/category_11525646.html?spm=1001.2014.3001.5482