尝试Vue3遇到exports报错

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

网上的解决方法

我在网上搜索所有有关于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有一个大概的了解。