尝试Vue3遇到exports报错

简介:前两天刚准备尝鲜vue3的时候,在使用vue-router的时候chrome控制栏出现exports is not defind的错误,导致路由没有办法使用。
IP: 18.205.192.201
IP归属地: 中国.上海
系统: https://commoncrawl.org/faq/
浏览器: Chrome

首先声明一点我并不是用下面的方法解决的,解决问题直接参考最下面我的解决方法,但这个过程我认为需要做了解,为什么会报这种错误,是什么原因引起的这个错误。

网上的解决方法

我在网上搜索所有有关于vue中exports is not defind有关的问题,究其原因就是不是所有的浏览器都能支持es6↑的语法,且默认vue-cli脚手架不用自动转换es6语法,网上解决方法大致分为:

1.如何解决带来exports问题的原因的代码,去掉项目中所有带有exports的错误写法;

2.调整通过vue-cli脚手架写在根目录的配置文件.babelrc,来控制modules是否转换,默认不转换需要改为true

这里给到几个上面方法的参考链接:

1.两种方法都讲的文章vue报错:exports is not defined

2.提到借助插件babel-preset-env的文章vue-cli中的.babelrc文件介绍

3..babelrc配置文件解析文章vue-cli中的babel配置文件.babelrc详解

4.babel-preset-env插件npm镜像站介绍babel-preset-env官网

# babel-preset-env插件npm镜像站介绍
modules
"amd" | "umd" | "systemjs" | "commonjs" | false, defaults to "commonjs".

Enable transformation of ES6 module syntax to another module type.
启用ES6模块语法到另一个模块类型的转换。

Setting this to false will not transform modules.
将此设置为false不会转换模块。
我的解决方法

上面的这两种方法我这边遇到了一些其他问题,我用的方法简单至极:npm install vue-router@next -D安装下一个版本的vue-router。关于npm install package@next版本管理参考:npm学习(一)之安装、更新以及管理npm版本

这个问题的原因可能是因为Vue3从原来的选项类型API(Options API)转换到合成型API(Composition API)带来的全家桶插件版本的强依赖,我用的是vue3.0.5和vue-router4.0.0可能是因为版本匹配的原因吧,我没有测试vue3.0.0所以不好绝对的下结论,这里更换了最新的vue-router就解决了这个问题应该能说明是版本的问题了吧。

再推荐一篇准备从vue2转换到vue3的小伙伴一个参考的文章,带你体验Vue2和Vue3开发组件有什么区别,这篇文章可以让你迅速对vue3有一个大概的了解。

简介:

前两天刚准备尝鲜vue3的时候,在使用vue-router的时候chrome控制栏出现exports is not defind的错误,导致路由没有办法使用。

文章信息
访问者信息