vue-router导入视图文件方式与打包参数的差异

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" 来获取可用于部署的应用程序。

所以原因就很清楚了。

vue-router导入视图文件方式与打包参数的差异相关推荐

python导入csv文件-jupyter 导入csv文件方式
先将准备的文件上传到自己的jupyter工作空间 import numpy as np import pandas as pd housing = pd.read_csv('housing.csv') ...
vue中导入excel文件
vue中导入excel文件 1.安装插件 npm install -S file-saver xlsxnpm install -D script-loader 2.在utils中创建excel文件夹放 ...
Vue 项目导入字体文件
要想实现UI设计师设计的原型效果,有时候需要用到一些特殊的字体,在项目中就需要导入相关的字体文件.本文章以平方字体为例. 1.导入字体文件 1.下载相应的字体文件,或者找UI设计师要一份(如果UI设计 ...
electron打包现成的vue项目成.exe文件，build打包vue项目（quasar 框架）
前言: 公司已有web端vue项目,现在有需求,需要把web端的该项目用electron打包成 .exe 可执行文件. 思考:打包成 .exe 文件,首先需要将vue项目在本地打包成静态可运行文件,其 ...
vue导出导入csv文件（无需插件）
vue导出csv的时候有一个问题,就是如果数据是UTF-8格式的,需要在文件内容前面加BOM头,这样Excel程序可以识别这个BOM头,不会乱码. csv文件无非就是文本行加上BOM头,字符串解析就可 ...
vue 前端导入excel文件，并展示出
在详细介绍前,先展示下效果技术介绍 element UI 组件的el-upload和el-table xlsx插件0.16.0版本第一步,下载xlsx插件 npm install xlsx@0.1 ...
vue 前端导入excel文件，并在页面表格展示
在详细介绍前,先展示下效果第一步,下载xlsx插件 npm install xlsx@0.16.0 在需要的文件中import导入"import xlsx form 'xlsx'" ...
asp.net core2.0中网站发布的时候，怎么样才配置才可以使视图文件不被打包进去？...
默认设置可真是坑~~ https://q.cnblogs.com/q/99680/ 转载于:https://www.cnblogs.com/xinzhyu/p/9004302.html
Vue 自定义指令的注册方式和选项参数
目录 1. 注册方法 1.1 全局注册的写法 1.2 局部注册的写法 2. 自定义指令的选项 2.1 选项 2.2 钩子函数的参数 1. 注册方法自定义指令的注册方法,分为全局注册和局部 ...

vue-router导入视图文件方式与打包参数的差异

vue-router导入视图文件方式与打包参数的差异相关推荐

最新文章

热门文章