webpack 解决:Cannot use import statement outside a module 的问题

1、问题描述:

其一、报错为:

Uncaught SyntaxError: Cannot use import statement outside a module;

中文为:

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

其二、问题描述为:

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

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

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

webpack 解决:Cannot use import statement outside a module 的问题_第1张图片

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

webpack 解决:Cannot use import statement outside a module 的问题_第2张图片

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

在这里插入图片描述

2、问题分析:

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

3、问题解决:

其一、发现并解决问题:

A、在 index.html 页面中引入了浏览器不能直接解析的东西(即:页面是不能直接识别这个 index.html 文件中的 main.js 中的 import 这些东西,需要 webpack 去打包等解析)
B、直接去掉 的引入,而引入 代码,因为:webpack 打包解析形成的 bundle.js 文件已经将 main.js 文件成功解析并放在了 bundle.js 文件里(即:此时引入的 main.js 文件是多余的,页面浏览器是不支持 ES6importexport语法;);

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

// 去掉 代码即可;
webpack 解决:Cannot use import statement outside a module 的问题_第3张图片

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

你可能感兴趣的:(#,webpack,webpack,前端,node.js,经验分享,浏览器控制台报错,vue.js,webpack配置)