从零搭建vue项目、env 文件与环境变量和模式

安装配置

已经安装过node.js的情况下，开始吧~

1、全局安装vue-cli3.0脚手架工具 

npm install -g @vue/cli

2、启动GUI创建项目向导


vue ui

可以看到创建vue项目的可视化界面，

3、点击创建新项目，下一步，就是按照自己的个人习惯喜欢进行配置，包管理器记得选择一下，根据个人喜好：我这里选择的是npm。

4、下一步之后选择手动配置项目；

创建项目功能的这一栏除了最后一项建议选上之外根据喜好来吧，项目创建之后，仍然可以通过安装插件来增加功能。

我这里选择了router、vuex等常用的插件：


devDependencies和dependencies的区别

在使用npm安装一些包时，经常要用到npm install这个命令，而对后面跟着的参数–save和–save-dev经常搞糊涂，那我们来看下这两者到底有啥区别。


  • devDependencies用于本地环境开发时候所需要的依赖包。
    • 

  • dependencies用户发布环境，生成上所需要的依赖包
    • 

  • 后面部分为–save -dev 的情况会使得下载的插件放在package.json文件的devDpendencies对象里面
    • 

  • 后面部分为–save的情况会使得下载的插件放在package.json文件的dependencies对象里面
    • 

  • devDependencies下的依赖包，只是我们在本地或开发坏境下运行代码所依赖的，若发到线上，其实就不需要devDependencies下的所有依赖包；(比如各种loader，babel全家桶及各种webpack的插件等)只用于开发环境，不用于生产环境，因此不需要打包；
    • 

  • dependencies是我们线上(生产坏境)下所要依赖的包，比如vue，我们线上时必须要使用的，所以要放在dependencies下；dependencies依赖的包不仅开发环境能使用，生产环境也能使用
    • 
babel-plugin-transform-remove-console这个插件是线上环境打包去掉console.log，本地及测试环境保留。是在npm run build的时候需要用到这个插件，并不是生产环境下代码运行依赖于这个插件，所以，babel-plugin-transform-remove-console应该在安装时加上–save -dev，出现在devDependencies中

    我们可以使用任务-serve里面的工具来运行项目，解放双手
    
关于vue.config.js具体配置我之前的文章有详细的解析，webpack 充当着举足轻重的作用，比如打包压缩、异步加载、模块化管理等等。贴上链接
    

    现在我们已经搭建好了一个简单的vue项目。
    
参考文章：https://blog.csdn.net/qq_42893625/article/details/102540535
    
https://www.jb51.net/article/152030.htm
    

    env 文件与环境变量和模式
    

    https://www.cnblogs.com/sese/p/11905402.html
    
先看官网：环境变量和模式
    

    process.env 为何物
    
process.env 是 Node.js 中的一个环境对象。其中保存着系统的环境的变量信息。可使用 Node.js 命令行工具直接进行查看。
    

    image.png
    

    也就是说，在 Vue 中， NODE_ENV可以通过 .env文件或者 .env.[mode]文件配置。配置过后，运行 Vue CLI 指令（ npm run dev(serve) ，npm run build ）时，就会将该模式下的NODE_ENV载入其中了。而这些命令，都有自己的默认模式：
    
npm run dev(serve) ，其实是运行了vue-cli service serve ，默认模式为 development 。可以在.env.development文件下修改该模式的 NODE_ENV 。
npm run build，其实运行了 vue-cli service build ，默认模式为production 。可以在 .env.production文件下修改该模式的 NODE_ENV 。

    我个人理解：
    
执行 npm run serve 时，对应的环境默认就是开发环境；
    
执行 npm run build 时，对应的环境默认就是生产环境；
    

    1、配置文件
    
一般一个项目都会有以下 3 种环境：- 开发环境- 测试环境- 生产环境
    
我们可以在根目录下创建以下形式的文件进行不同环境下变量的配置：
    

    .env                # 在所有的环境中被载入
    
.env.local           # 在所有的环境中被载入，但会被 git 忽略
    
.env.[mode].local   # 只在指定的模式中被载入，但会被 git 忽略
    
.env.[mode]         # 只在指定的模式中被载入
    

    如官方文档所说，通过为.env文件增加后缀来设置某个模式下特有的环境变量。
    

    我这里创建一个名为 .env.stage的文件，该文件表明其只在 stage（测试）环境下被加载，在这个文件中，我们可以配置如下键值对的变量：
    

    NODE_ENV=stage//环境名称
VUE_APP_TITLE=stage mode
VUE_APP_BASE_URL = 'groupClient'
VUE_APP_BASE_API = '/massgroup'

    这时候我们怎么在 vue.config.js 中访问这些变量呢？很简单，使用 process.env.[name] 进行访问就可以了，比如：
    

    // vue.config.js的service.interceptors.response.use(res => {中
console.log("当前环境变量："+process.env.NODE_ENV) // development（在终端输出）
console.log("当前环境路径："+process.env.VUE_APP_BASE_URL)
console.log("当前环境路径："+process.env.VUE_APP_BASE_API)

    当你运行 npm serve 命令后会发现输出的是 development，因为 vue-cli-service serve 命令默认设置的环境是development，你需要修改 package.json 中的 serve 脚本的命令为：
    

    "scripts": {
    "serve": "vue-cli-service serve --mode stage",

    --mode stage其实就是修改了 webpack 4 中的 mode 配置项为 stage，同时其会读取对应 .env.[model]文件下的配置，如果没找到对应配置文件，其会使用默认环境 development，同样 vue-cli-service build 会使用默认环境 production。
    

    这时候如果你再创建一个 .env 的文件，再次配置重复的变量，但是值不同，如：
    

    NODE_ENV=staging
VUE_APP_TITLE=staging mode
VUE_APP_NAME=project

    因为.env 文件会被所有环境加载，即公共配置，那么最终我们运行 vue-cli-service serve 打印出来的是哪个呢？答案是 stage，但是如果是 .env.stage.local 文件中配置成上方这样，答案便是 staging，所以 .env.[mode].local 会覆盖 .env.[mode] 下的相同配置。同理 .env.local 会覆盖 .env 下的相同配置。
    
由此可以得出结论，相同配置项的权重：
    

    .env.[mode].local > .env.[mode] > .env.local > .env 

    但是需要注意的是，除了相同配置项权重大的覆盖小的，不同配置项它们会进行合并操作，类似于 Javascript 中的 Object.assign 的用法。
    

    2、环境注入
    
通过上述配置文件的创建，我们成功使用命令行的形式对项目环境进行了设置并可以自由切换，但是需要注意的是我们在 Vue 的前端代码中打印出的 process.env 与 vue.config.js 中输出的可能是不一样的，这需要普及一个知识点：webpack 通过 DefinePlugin 内置插件将 process.env 注入到客户端代码中。
    

    // webpack 配置
    plugins: [
        new webpack.DefinePlugin({
            'process.env': {
                NODE_ENV: JSON.stringify(process.env.NODE_ENV)

    由于 vue-cli 3.x 封装的 webpack 配置中已经帮我们完成了这个功能，所以我们可以直接在客户端代码中打印出 process.env 的值，该对象可以包含多个键值对，也就是说可以注入多个值，但是经过 CLI 封装后仅支持注入环境配置文件中以 VUE_APP_ 开头的变量，而 NODE_ENV 和 BASE_URL 这两个特殊变量除外。比如我们在权重最高的 .env.stage.local 文件中写入：
    

    NODE_ENV=stage2
VUE_APP_TITLE=stage mode2
NAME=vue

    然后我们尝试在 vue.config.js 中打印 process.env，终端输出：
    
    npm_config_ignore_scripts: '',
    npm_config_version_git_sign: '',
    npm_config_ignore_optional: '',
    npm_config_init_version: '1.0.0',
    npm_package_dependencies_vue_router: '^3.0.1',
    npm_config_version_tag_prefix: 'v',
    npm_node_execpath: '/usr/local/bin/node',
    NODE_ENV: 'stage2',
    VUE_APP_TITLE: 'stage mode2',
    NAME: 'vue',
    BABEL_ENV: 'development',

    可以看到输出内容除了我们环境配置中的变量外还包含了很多 npm 的信息，但是我们在入口文件 main.js 中打印会发现输出：
    
    "BASE_URL": "/vue/",
    "NODE_ENV": "stage2",
    "VUE_APP_TITLE": "stage mode2"

    可见注入时过滤调了非 VUE_APP_ 开头的变量，其中多出的 BASE_URL 为你在 vue.config.js 设置的值，默认为 /，其在环境配置文件中设置无效。
    

    因为在安装时选择了eslint，就会有一些莫名其妙的格式规范的报错。（尝试了瓦网上说的很多办法都不可以）
    
我们在项目中的vue.config.js文件里加上：
    

    // vue.config.js