vue-cli-service在打包webpack项目时,由于vue router导入视图文件的写法不同,打包的参数npm run build:dev | npm run build:prod引起的页面展示差异,例如静态导入,异步导入等,下面来介绍一下这几种差异。
- 路由文件在文件内容中静态import ,打包参数使用build --mode development
此方式的编译包可以在浏览器正常展示 - 路由文件在文件内容中静态import,打包参数使用 build --mode production
此种方式的编译包时无法在浏览器正常加载视图,通常控制台会报如下错误[Vue Router warn]: Component "default" in record with path "/router" is a Promise instead of a function that returns a Promise. Did you write "import('./**.vue')" instead of "() => import('./**.vue')" ? This will break in production if not fixed.
- 路由文件在文件内容中通过异步函数 import,打包参数使用 build --mode production/development
两种方式均可以正常显示页面 - 路由文件在文件头静态import,在内容中直接赋值 打包参数使用 build --mode development
该方式可以正常访问并加载, - 路由文件在文件头静态import,在内容中直接赋值 打包参数使用 build --mode production
该方式可以正常访问并加载
所以得出一个结论:路由视图文件的导入必须采用异步函数或者在文件头处导入
在各种查询中叶没有得到具体的原因,但是翻开vue-cli的文档时,有惊喜的发现,其实这样是由原因的:模式和环境变量 | Vue CLI,以下是引用原文:
模式是 Vue CLI 项目中一个重要的概念。默认情况下,一个 Vue CLI 项目有三个模式:
development
模式用于vue-cli-service serve
test
模式用于vue-cli-service test:unit
production
模式用于vue-cli-service build
和vue-cli-service test:e2e
你可以通过传递
--mode
选项参数为命令行覆写默认的模式。例如,如果你想要在构建命令中使用开发环境变量:vue-cli-service build --mode development
当运行
vue-cli-service
命令时,所有的环境变量都从对应的环境文件中载入。如果文件内部不包含NODE_ENV
变量,它的值将取决于模式,例如,在production
模式下被设置为"production"
,在test
模式下被设置为"test"
,默认则是"development"
。
NODE_ENV
将决定您的应用运行的模式,是开发,生产还是测试,因此也决定了创建哪种 webpack 配置。例如通过将
NODE_ENV
设置为"test"
,Vue CLI 会创建一个优化过后的,并且旨在用于单元测试的 webpack 配置,它并不会处理图片以及一些对单元测试非必需的其他资源。同理,
NODE_ENV=development
创建一个 webpack 配置,该配置启用热更新,不会对资源进行 hash 也不会打出 vendor bundles,目的是为了在开发的时候能够快速重新构建。当你运行
vue-cli-service build
命令时,无论你要部署到哪个环境,应该始终把NODE_ENV
设置为"production"
来获取可用于部署的应用程序。
所以原因就很清楚了。