Vue CLI 3项目笔记（一）

最新推荐文章于 2024-04-14 17:54:51 发布

longlongValue

最新推荐文章于 2024-04-14 17:54:51 发布

阅读量613

点赞数 2

分类专栏：技术笔记文章标签： vue cli vue cli 3 VUE CLI3 环境变量 .js.map

本文链接：https://blog.youkuaiyun.com/longlongValue/article/details/88313157

版权

技术笔记专栏收录该内容

38 篇文章

订阅专栏

从vue-cli2.x升级到vue cli 3.x之后新建的项目目录出现明显的差别。
具体差别不一一列举，自己感受。

一、首先说一下环境变量的问题，官网上基本上说的很清楚，但是对于我这种半吊子而言还是出现了误区。

1.首先我们需要了解VUE CLI有三种模式：test、development、production。[官网](https://cli.vuejs.org/guide/mode-and-env.html#modes)说的很详细不多说。

2.假如你要区分开发环境和生产环境，首先新建3个文件：.env、.env.development、.env.production分别表示全环境变量、开发环境变量和生产环境变量。

3.误区一：以为在对应文件中写不同的变量就可以了。比如我在开发环境和生产环境分别写上VUE_APP_TITLE就可以了。注意：官网说了不管你什么环境.env文件中必须有这个变量。假如不在.env中声明，虽然文件中也会执行成功但是控制台会出现一个错误。

4.误区二：我看到命令vue-cli-service build --mode development表示在开发环境运行，尝试使用该命令报错说不识别该命令。使用npm run serve  --mode development报错：this dependency was not found。
		后来发现是直接在papackage.json中修改运行模式"serve": "vue-cli-service serve"修改为"serve": "vue-cli-service serve  --mode development"即可

下面就环境变量的问题按照傻子逻辑进行说明

1.新建.env与.env.staging文件
2.以key-value的方式在两份文件同时写上不同模式下的变量
3.main.js中可以写上代码进行验证

console.log(process.env.VUE_APP_SECRET)

4.在启动项目之前别忘了最重要的一步
在package.json中添加代码

  "scripts": {
    "serve": "vue-cli-service serve",
    /* 添加下面一行 */
    "staging": "vue-cli-service serve --mode staging",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },

然后控制台就可以执行 npm run staging了。

二、build文件中的.map文件以及文件名中hash问题

1.map文件都是什么东西？
以.js.map为例：
.js.map

2.首先我们需要知道在vue中Webpack打包好的文件为什么会有.map文件？

我们在打包中，将开发环境中源代码经过压缩，去空格，babel编译转化，最终可以得到适用于生产环境的项目代码，这样处理后的项目代码和源代码之间差异性很大，会造成无法debug的问题。

举例来说，如果压缩等处理过的生产环境中的代码出现bug，调试的时候只能定位到压缩处理后的代码的位置，无法定位到开发环境中的源代码。

sourcemap就是为了解决上述代码定位的问题，简单理解，就是构建了处理前的代码和处理后的代码之间的桥梁。主要是方便开发人员的错误定位。

3.我们如何更改？

在Vue项目根目录下（与package.json平级）新建vue.config.js文件然后配置
// vue.config.js

module.exports = {
  // options...
  productionSourceMap:false,
}

包括文件名的hash值也可以在构建的时候选择不使用，同样在vue.config.js中

module.exports = {
  // options...
  productionSourceMap:false,
  filenameHashing:false,
}

这里我进入到误区中把webpack简单了解了一下，其中如何针对开发环境和生产环境，选择合理的sourcemap属性问题看的异常认真

（1）首先在源代码的列信息是没有意义的，只要有行信息就能完整的建立打包前后代码之间的依赖关系。因此不管是开发环境还是生产环境，我们都会选择增加cheap基本类型来忽略模块打包前后的列信息关联。

（2）另外需要补充的是module关键字，当加上module关键字webpack将会添加loader的sourcemap。不管在生产环境还是开发环境，我们都需要定位debug到最最原始的资源，比如定位错误到jsx，coffeeScript的原始代码处，而不是编译成js的代码处

（3）其次我们希望通过生成.map文件的形式，因此要增加source-map属性

开发环境推荐：

cheap-module-eval-source-map

生产环境推荐：

cheap-module-source-map

官方文档对于包含cheap的解释是这样的：

cheap-source-map - A SourceMap without column-mappings. SourceMaps
from loaders are not used.

详情详情