Vue项目（Vue cli3）中的配置文件

左手的ㄟ右手 2022-11-16 00:56 611阅读 0赞

### 文章目录 ###

*  package.json
 *  全局 CLI 配置文件 vue.config.js
 *  Js代码检查 .eslintrc.js
 *  模式和环境变量 .env
 *   *   *  模式
         *  环境变量
         *   *   *  语法规则
                 *  环境文件加载优先级
 *  babel.config.js
 *  .gitignore
 *  .editorconfig

# package.json #

定义了项目所需要的各种模块，以及项目的配置信息。

# 全局 CLI 配置文件 vue.config.js #

官网：[https://cli.vuejs.org/zh/config/\#vue-config-js][https_cli.vuejs.org_zh_config_vue-config-js]  
vue.config.js 是一个可选的配置文件，如果项目的根目录中存在这个文件，那么它会被 @vue/cli-service 自动加载。  
常用配置项：

<table> 
 <thead> 
  <tr> 
   <th align="left">配置项</th> 
   <th align="left">说明</th> 
   <th>类型</th> 
   <th>默认值</th> 
   <th>更多</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">publicPath</td> 
   <td align="left">设置部署应用包时的基本 URL</td> 
   <td>String</td> 
   <td>‘/’</td> 
   <td><a href="https://blog.csdn.net/weixin_44869002/article/details/105819462" rel="nofollow">详情</a></td> 
  </tr> 
  <tr> 
   <td align="left">outputDir</td> 
   <td align="left">设置项目打包生成的文件的存储目录</td> 
   <td>String</td> 
   <td>‘dist’</td> 
   <td><a href="https://blog.csdn.net/weixin_44869002/article/details/105819648" rel="nofollow">详情</a></td> 
  </tr> 
  <tr> 
   <td align="left">assetsDir</td> 
   <td align="left">指定放置打包生成的静态资源 (js、css、img、fonts) 的目录(相对于outputDir)</td> 
   <td>String</td> 
   <td>‘’</td> 
   <td><a href="https://blog.csdn.net/weixin_44869002/article/details/105819648" rel="nofollow">详情</a></td> 
  </tr> 
  <tr> 
   <td align="left">indexPath</td> 
   <td align="left">设置生成的 index.html 的输出路径 (相对于 outputDir)。也可以是一个绝对路径</td> 
   <td>String</td> 
   <td>‘index.html’</td> 
   <td><a href="https://blog.csdn.net/weixin_44869002/article/details/105819648" rel="nofollow">详情</a></td> 
  </tr> 
  <tr> 
   <td align="left">filenameHashing</td> 
   <td align="left">设置打包生成的静态资源的文件名中是否加入hash，控制浏览器缓存</td> 
   <td>Boolean</td> 
   <td>true</td> 
   <td><a href="https://blog.csdn.net/weixin_44869002/article/details/105820035" rel="nofollow">详情</a></td> 
  </tr> 
  <tr> 
   <td align="left">lintOnSave</td> 
   <td align="left">设置是否在开发环境下每次保存代码时都启用 eslint验证</td> 
   <td>Boolean/String</td> 
   <td>true</td> 
   <td><a href="https://blog.csdn.net/weixin_44869002/article/details/105831476" rel="nofollow">详情</a></td> 
  </tr> 
  <tr> 
   <td align="left">configureWebpack</td> 
   <td align="left">对内部的webpack配置的进行新增与修改</td> 
   <td>Object/Function</td> 
   <td>function</td> 
   <td><a href="https://blog.csdn.net/weixin_44869002/article/details/105831476" rel="nofollow">详情</a></td> 
  </tr> 
  <tr> 
   <td align="left">chainWebpack</td> 
   <td align="left">对内部的webpack配置的进行新增与修改（链式操作）</td> 
   <td>Function</td> 
   <td>function</td> 
   <td><a href="https://blog.csdn.net/weixin_44869002/article/details/105831476" rel="nofollow">详情</a></td> 
  </tr> 
  <tr> 
   <td align="left">devServer</td> 
   <td align="left">NodeJs架设起临时的服务器用于项目的运行与调试</td> 
   <td>Object</td> 
   <td>见下</td> 
   <td><a href="https://blog.csdn.net/weixin_44869002/article/details/105864712" rel="nofollow">详情</a></td> 
  </tr> 
 </tbody> 
</table>

devServer的部分属性：

devServer: { 
        inline: true, // 用于设置代码保存时是否自动刷新页面
        hot: true, // 设置代码保存时是否进行热更新（局部刷新，不刷新整个页面）
        open: false, // 设置 server 启动后是否自动打开浏览器
        openPage: '', // 指定deserver 编译完成后自动打开的页面
        https: false, // 设置是否启用https
        port: 8080, // 设置要监听的端口号
        host: 'localhost', // 指定devDerve使用的host，localhost
        compress: true, // devServer 所有服务启用 gzip 压缩
        overlay: false, // 当出现编译器错误或警告时，在浏览器中显示全屏覆盖层
        // 设置API访问代理,.proxy 一定要设置 target
        proxy: { 
          '/api': { 
            target: 'http://localhost:5000',
            changeOrigin: true
          }
        }
      }

# Js代码检查 .eslintrc.js #

ESLint 是一个插件化的javascript代码检测工具。与它类似的项目有 JSLint、JSHint。在多人合作的项目中能够强制每一位编写者使用相同的代码规范，对于协作开发来说非常有用。  
如默认eslint规则，代码末尾不能加分号 ;代码中不能存在多行空行；tab键不能使用，必须换成两个空格；代码中不能存在声明了但未使用的变量等。  
ESLint 可以通过 .eslintrc.js 或 package.json 中的 eslintConfig 字段来配置ESLint规则。  
在使用Vue cli创建项目时，选择Linter / Formatter规范类型时，有以下选项：  
![在这里插入图片描述][20210409154843768.png]

*  [ESLint with error prevention only][]  
    只配置使用 ESLint 官网的推荐规则
 *  ESLint + Airbnb config  
    使用 ESLint 官网推荐的规则 + Airbnb 第三方的配置
 *  ESLint + [Standard config][]  
    使用 ESLint 官网推荐的规则 + Standard 第三方的配置
 *  ESLint + Prettier  
    使用 ESLint 官网推荐的规则 + [Prettier 第三方的配置][Prettier]

module.exports = { 
      root: true,
      env: { 
        node: true
      },
      extends: [
        'plugin:vue/essential',
        '@vue/standard'
      ],
      parserOptions: { 
        parser: 'babel-eslint'
      },
      rules: { 
        'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
        'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off' 
      }
    }

*  **root** 指定配置文件根目录：表示当前文件为eslint的根配置文件，逐层查找时无需往更上一级的文件目录中进行搜索
 *  **extends** 规则继承
 *  **env** 运行环境极其局全局变量
 *  **parserOptions** 指定eslint解析器，babel-eslint是围绕Babel解析器的包装器使其与ESLint兼容
 *  **plugins**： 插件
 *  **rules** 规则列表
    
        rules: { 
            "规则名": [规则值, 规则配置]
        }
    
    规则值：  
    'off’或者0 : 规则关闭  
    'warn’或者1 : 把规则作为一个警告  
    'error’或者2 : 把规则作为一个错误

# 模式和环境变量 .env #

官网：[https://cli.vuejs.org/zh/guide/mode-and-env.html][https_cli.vuejs.org_zh_guide_mode-and-env.html]

### 模式 ###

默认情况下，一个 Vue CLI 项目有三个模式：开发模式、测试模式、生产模式  
package.json：

"scripts": { 
        "serve": "vue-cli-service serve",
        "build": "vue-cli-service build",
        "test:unit": "vue-cli-service test:unit"
      },

当运行vue-cli-service命令时，可以通过传递 --mode 选项参数为命令行覆写默认的模式，如果不这样做，所有的环境变量都从对应的`环境文件（.env）`中载入，如果.env内部不包含 NODE\_ENV 变量，NODE\_ENV的值将取决于模式，如，production 模式下NODE\_ENV被设置为 production

### 环境变量 ###

可以在项目根目录中放置下列环境文件来配置环境变量：

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

##### 语法规则 #####

一个环境文件只包含环境变量的“键=值”对  
键名必须以NODE\_ENV，BASE\_URL 和以 VUE\_APP\_ 开头

##### 环境文件加载优先级 #####

特定模式的环境配置文件优先于一般的环境配置文件，如.env.production比.env拥有更高的优先级

# babel.config.js #

webpack 能识别出js文件，但由于目前大部分浏览器还不支持ES6语法，必须使用babel来将js高级的语法(如：ES7,ES6,JSX等)转成ES5语法，然后打包到 bundle.js中去。  
Babel 可以通过 babel.config.js 进行配置。Vue CLI 使用了 Babel 7 中的新配置格式 babel.config.js。  
Vue CLI 应用使用 @vue/babel-preset-app，它包含了 babel-preset-env、JSX 支持以及为最小化包体积优化过的配置  
下面的例子中配置了按需加载ant design vue 组件库

npm i babel-plugin-import -D

module.exports = { 
      presets: [
        '@vue/cli-plugin-babel/preset'
      ],
      plugins: [
        [
          'import',
          {  libraryName: 'ant-design-vue', libraryDirectory: 'es', style: true }
        ]
      ]
    }

# .gitignore #

.gitignore的作用就是告诉Git哪些文件不需要添加到版本管理中。语法规则见[https://my.oschina.net/longyuan/blog/521098][https_my.oschina.net_longyuan_blog_521098]

# .editorconfig #

[EditorConfig][]插件能够帮助开发人员在不同的编辑器和IDE之间定义和维护一致的编码样式。Webstorm直接支持EditorConfig，Vscode或者Sublime等需要额外安装。  
在项目的根目录下，配置一个 .editorconfig 文件，就能够在几乎所有的主流 IDE 和编辑器中复用了，可以将 .editorconfig 文件提交到版本控制系统中，就不需要针对不同 IDE 和编辑器再单独进行设置了。

[*.{ js,jsx,ts,tsx,vue}]  // 匹配 .js,.jsx,.ts,.tsx,.vue文件
    indent_style = space  // 缩进方式
    indent_size = 2 // 缩进的空格数为2
    trim_trailing_whitespace = true  // 删除行尾空格
    insert_final_newline = true // 让文件以空行结束
    max_line_length = 80 // 最大行宽

[https_cli.vuejs.org_zh_config_vue-config-js]: https://cli.vuejs.org/zh/config/#vue-config-js
[20210409154843768.png]: /images/20221022/c6fd881024e04a16acac1802059236d8.png
[ESLint with error prevention only]: https://eslint.bootcss.com/docs/rules/
[Standard config]: https://github.com/standard/standard/blob/master/docs/RULES-zhcn.md#javascript-standard-style
[Prettier]: https://prettier.io/docs/en/options.html
[https_cli.vuejs.org_zh_guide_mode-and-env.html]: https://cli.vuejs.org/zh/guide/mode-and-env.html
[https_my.oschina.net_longyuan_blog_521098]: https://my.oschina.net/longyuan/blog/521098
[EditorConfig]: https://editorconfig.org/