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

最新推荐文章于 2024-08-07 09:08:07 发布

牧云流

最新推荐文章于 2024-08-07 09:08:07 发布

阅读量2.1k

点赞数

分类专栏： VUE

本文链接：https://blog.csdn.net/dreamingbaobei3/article/details/115400217

版权

VUE 专栏收录该内容

37 篇文章 1 订阅

订阅专栏

文章目录

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
vue.config.js 是一个可选的配置文件，如果项目的根目录中存在这个文件，那么它会被 @vue/cli-service 自动加载。
常用配置项：

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

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规范类型时，有以下选项：
在这里插入图片描述

ESLint with error prevention only
只配置使用 ESLint 官网的推荐规则
ESLint + Airbnb config
使用 ESLint 官网推荐的规则 + Airbnb 第三方的配置
ESLint + Standard config
使用 ESLint 官网推荐的规则 + Standard 第三方的配置
ESLint + Prettier
使用 ESLint 官网推荐的规则 + 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

模式

默认情况下，一个 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

.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 // 最大行宽