1、前因
nuxt项目需要扩展elementUI组件,故将elementUI组件源码拷贝出来,由于该组件依赖一些elementUI基础组件,比如该组件中引入:
import ElInput from 'element-ui/packages/input';
2、错误现象
通过路由访问页面时正常,但通过浏览器刷新页面 nuxt服务端请求页面内容报500 SyntaxError,页面显示“Cannot use import statement outside a module” 或者 “Unexpected identifier”报错信息。
3、解决问题
在nuxt.config.js中添加:build: { transpile: [/^element-ui/]} 即可解决这个问题
4、原因
官网解释transpile作用:
如果要使用Babel与特定的依赖关系进行转换,你可以在build.transpile
中添加它们,transpile
中的选项可以是字符串或正则表达式对象,用于匹配依赖项文件名。
猜测:可能是刷新页面时服务器端会将页面js加载执行好再返回到浏览器(可直接展示的页面),服务端加载执行js时不能识别es的新语法(服务端是通过node起服务的,确切的说应该是node无法识别es新语法),这里在nuxt配置文件里将element-ui通过bable转换成服务器端能识别的es语法。
验证:将nuxt项目启动为SPA模式(nuxt --spa),即不使用服务端渲染(无需node),通过浏览器刷新页面无报错。
如果大家对原因这块有不同见解,欢迎留言,共同探讨。