vue运行报错:SyntaxError: Cannot use import statement outside a module

简介: vue运行报错:SyntaxError: Cannot use import statement outside a module

PS C:\Users\wangting\Desktop\assets_web_admin\assets_web_admin> npm run dev
> vue-element-admin@4.2.1 dev C:\Users\wangting\Desktop\assets_web_admin\assets_web_admin
> vue-cli-service serve
 INFO  Starting development server...
 10% building 2/2 modules 0 active ERROR  SyntaxError: Cannot use import statement outside a module
C:\Users\wangting\Desktop\assets_web_admin\assets_web_admin\mock\index.js:1
import "core-js/modules/es6.regexp.constructor";
^^^^^^
SyntaxError: Cannot use import statement outside a module
    at wrapSafe (internal/modules/cjs/loader.js:1072:16)
    at Module._compile (internal/modules/cjs/loader.js:1122:27)
    at Module._compile (C:\Users\wangting\Desktop\assets_web_admin\assets_web_admin\node_modules\pirates\lib\index.js:99:24)
    at Module._extensions..js (internal/modules/cjs/loader.js:1178:10)
    at Object.newLoader [as .js] (C:\Users\wangting\Desktop\assets_web_admin\assets_web_admin\node_modules\pirates\lib\index.js:104:7)
    at Module.load (internal/modules/cjs/loader.js:1002:32)
    at Function.Module._load (internal/modules/cjs/loader.js:901:14)
    at Module.require (internal/modules/cjs/loader.js:1044:19)
    at require (internal/modules/cjs/helpers.js:77:18)
    at registerRoutes (C:\Users\wangting\Desktop\assets_web_admin\assets_web_admin\mock\mock-server.js:11:30)
    at Object.module.exports [as before] (C:\Users\wangting\Desktop\assets_web_admin\assets_web_admin\mock\mock-server.js:57:22)
    at Object.before (C:\Users\wangting\Desktop\assets_web_admin\assets_web_admin\node_modules\@vue\cli-service\lib\commands\serve.js:165:67)
    at Server.setupBeforeFeature (C:\Users\wangting\Desktop\assets_web_admin\assets_web_admin\node_modules\webpack-dev-server\lib\Server.js:455:18)
    at Object.before (C:\Users\wangting\Desktop\assets_web_admin\assets_web_admin\node_modules\webpack-dev-server\lib\Server.js:515:16)
    at C:\Users\wangting\Desktop\assets_web_admin\assets_web_admin\node_modules\webpack-dev-server\lib\Server.js:584:24
    at Array.forEach (<anonymous>)

原来是我在写代码的时候

不小心删掉了这段代码

打开

环境配置.env.development文件

在最后面加上

VUE_CLI_BABEL_TRANSPILE_MODULES = true

这个文件完整的代码如下

还是改一下随手乱动代码的习惯吧~~~

# just a flag
ENV = 'development'
# base api
VUE_APP_BASE_API = '/dev-api'
# vue-cli uses the VUE_CLI_BABEL_TRANSPILE_MODULES environment variable,
# to control whether the babel-plugin-dynamic-import-node plugin is enabled.
# It only does one thing by converting all import() to require().
# This configuration can significantly increase the speed of hot updates,
# when you have a large number of pages.
# Detail:  https://github.com/vuejs/vue-cli/blob/dev/packages/@vue/babel-preset-app/index.js
VUE_CLI_BABEL_TRANSPILE_MODULES = true

再次执行

npm run dev

即可运行成功了

相关文章
|
12天前
|
JavaScript 关系型数据库 MySQL
基于VUE的校园二手交易平台系统设计与实现毕业设计论文模板
基于Vue的校园二手交易平台是一款专为校园用户设计的在线交易系统,提供简洁高效、安全可靠的二手商品买卖环境。平台利用Vue框架的响应式数据绑定和组件化特性,实现用户友好的界面,方便商品浏览、发布与管理。该系统采用Node.js、MySQL及B/S架构,确保稳定性和多功能模块设计,涵盖管理员和用户功能模块,促进物品循环使用,降低开销,提升环保意识,助力绿色校园文化建设。
|
2天前
|
JavaScript
vue使用iconfont图标
vue使用iconfont图标
27 1
|
2月前
|
JavaScript API 开发者
Vue是如何进行组件化的
Vue是如何进行组件化的
|
2月前
|
JavaScript 前端开发 开发者
Vue是如何进行组件化的
Vue是如何进行组件化的
|
8月前
|
JavaScript API
【vue实战项目】通用管理系统:api封装、404页
【vue实战项目】通用管理系统:api封装、404页
81 3
|
8月前
|
人工智能 JavaScript 前端开发
毕设项目-基于Springboot和Vue实现蛋糕商城系统(三)
毕设项目-基于Springboot和Vue实现蛋糕商城系统
|
8月前
|
JavaScript Java 关系型数据库
毕设项目-基于Springboot和Vue实现蛋糕商城系统(一)
毕设项目-基于Springboot和Vue实现蛋糕商城系统
200 0
|
8月前
|
JavaScript 前端开发 API
Vue3+Vite+TypeScript常用项目模块详解
现在无论gitee还是github,越来越多的前端开源项目采用Vue3+Vite+TypeScript+Pinia+Elementplus+axios+Sass(css预编译语言等),其中还有各种项目配置比如eslint 校验代码工具配置等等,而我们想要进行前端项目的二次开发,就必须了解会使用这些东西,所以作者写了这篇文章进行简单的介绍。
156 0
Vue3+Vite+TypeScript常用项目模块详解
|
8月前
|
设计模式 JavaScript
探索 Vue Mixin 的世界:如何轻松复用代码并提高项目性能(上)
探索 Vue Mixin 的世界:如何轻松复用代码并提高项目性能(上)
探索 Vue Mixin 的世界:如何轻松复用代码并提高项目性能(上)
|
8月前
|
前端开发 JavaScript Java
毕业设计|基于SpringBoot+Vue的科研课题项目管理系统
毕业设计|基于SpringBoot+Vue的科研课题项目管理系统
207 1