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

即可运行成功了

相关文章
|
4天前
|
缓存 监控 JavaScript
探讨优化Vue应用性能和加载速度的策略
【5月更文挑战第17天】本文探讨了优化Vue应用性能和加载速度的策略:1) 精简代码和组件拆分以减少冗余;2) 使用计算属性和侦听器、懒加载、预加载和预获取优化路由;3) 数据懒加载和防抖节流处理高频事件;4) 图片压缩和选择合适格式,使用CDN加速资源加载;5) 利用浏览器缓存和组件缓存提高效率;6) 使用Vue Devtools和性能分析工具监控及调试。通过这些方法,可提升用户在复杂应用中的体验。
15 0
|
4天前
|
JavaScript 前端开发
vue(1),小白看完都会了
vue(1),小白看完都会了
|
3天前
|
设计模式 JavaScript 前端开发
Vue3报错Property “xxx“ was accessed during render but is not defined on instance
Vue3报错Property “xxx“ was accessed during render but is not defined on instance
|
4天前
|
JavaScript 开发工具 git
Vue 入门系列:.env 环境变量
Vue 入门系列:.env 环境变量
10 1
|
4天前
|
JavaScript 前端开发 定位技术
Vue使用地图以及实现轨迹回放 附完整代码
Vue使用地图以及实现轨迹回放 附完整代码
Vue使用地图以及实现轨迹回放 附完整代码
|
4天前
|
JavaScript
Vue中避免滥用this去读取data中数据
Vue中避免滥用this去读取data中数据
|
4天前
|
JavaScript
vue中使用pinia及持久化
vue中使用pinia及持久化
8 0
|
4天前
|
JavaScript 数据库
ant design vue日期组件怎么清空 取消默认当天日期
ant design vue日期组件怎么清空 取消默认当天日期
|
5天前
|
JavaScript C++
vue高亮显示组件--转载
vue高亮显示组件--转载
9 0
|
5天前
|
JavaScript 前端开发 数据安全/隐私保护
揭秘Vue中v-model的内部工作机制
揭秘Vue中v-model的内部工作机制