vue中env文件的配置
- vue项目中env文件的配置
- 文件名：
- 文件内容：
- 关于文件的加载
- process.env属性
- 注意修改完要重新启动一遍项目
- vue项目中 .eslintrc.js
- vue项目中 .gitignore
- vue 项目中 .eslintignore
- vue 项目中.stylelintrc.js
- vue 项目中 jsconfig.json
- vue 项目中 .editorconfig
vue项目中env文件的配置
因项目中有使用到.env文件，所以记录一下用处，方便日后查看
文件名：
必须按如下方式命名，无需手动控制加载哪个文件
.env全局默认配置文件，不论什么环境都会加载合并.env.development开发环境下的配置文件.env.production生产环境下的配置文件
文件内容：
NODE_ENV = 'development'
# just a flag
ENV = 'development'
# base api（使用mock.js时，切换dev-api）
# VUE_APP_BASE_API = '/dev-api'
VUE_APP_BASE_API = ''
# 常量
VUE_APP_SYSTEM_APPID = '98500000186000000'
VUE_APP_ONEID_HOME_PAGE = 'http://10.0.xx.xx'
VUE_APP_ONEID_OAUTH_URL = 'http://10.0.xx.xx/xxxxx/authorize'
# vue-cli uses the VUE_CLI_BABEL_TRANSPILE_MODULES environment variable,
# to control whether the babel-plugin-dynamic-import-node plugin is enabled.
# It only does one thing by converting all import() to require().
# This configuration can significantly increase the speed of hot updates,
# when you have a large number of pages.
# Detail: https://github.com/vuejs/vue-cli/blob/dev/packages/@vue/babel-preset-app/index.js
VUE_CLI_BABEL_TRANSPILE_MODULES = trueNODE_ENV = 'production'
# just a flag
ENV = 'production'
# base api
VUE_APP_BASE_API = ''
# 常量
VUE_APP_SYSTEM_APPID = '98500000186000000'
VUE_APP_ONEID_HOME_PAGE = 'https://yyy.xxx.com'
VUE_APP_ONEID_OAUTH_URL = 'https://yyy.xxx.com/oauth/index'关于文件的加载
根据启动命令vue会自动加载对应的环境，vue是根据文件名进行加载的，所以上面说无需专门控制加载哪个文件
比如执行npm run serve/dev 命令，会自动加载 .env.development 文件
process.env属性
process.env属性：全局属性，任何地方均可使用;
可以打印看下输出：
可见NODE_ENV被改为了development，覆盖掉了.env中的全局属性
注意修改完要重新启动一遍项目
vue项目中 .eslintrc.js
js代码的语法检查
代码提示出现很多奇奇怪怪的错误提示，因为是eslintrc.js文件没有配置相关命令
默认eslint规则：
- 代码末尾不能加分号 ;
- 代码中不能存在多行空行；
- tab键不能使用，必须换成两个空格；
- 代码中不能存在声明了但未使用的变量；
最简单的方法，关闭eslint检测，把 build/webpack.base.conf.js 配置文件中的eslint rules注释掉即可。但不推荐这么做，eslint检测是有必要的，能保持良好的代码风格。
第二种方法就是把不符合自己习惯的规则去掉，如下：
module.exports = {
// 解析：用来告诉eslint找当前配置文件不能往父级查找
root: true,
// 解析： 用来指定eslint解析器的，解析器必须符合规则
// babel-eslint解析器是对babel解析器的包装使其与ESLint解析
parserOptions: {
parser: 'babel-eslint',
sourceType: 'module'
},
// 解析： 用来指定环境的全局变量，下面的配置指定为browser node es6环境
env: {
browser: true,
node: true,
es6: true,
},
// 解析： 用来配置vue.js风格
extends: ['plugin:vue/recommended', 'eslint:recommended'],
// add your custom rules here
//it is base on https://github.com/vuejs/eslint-config-vue
/*
* "规则名": [规则值, 规则配置]
* "off" 或者 0 //关闭规则关闭
* "warn" 或者 1 //在打开的规则作为警告（不影响退出代码）
* "error" 或者 2 //把规则作为一个错误（退出代码触发时为1）
* */
rules: {
"vue/max-attributes-per-line": [2, {
"singleline": 10,
"multiline": {
"max": 1,
"allowFirstLine": false
}
}],
"vue/singleline-html-element-content-newline": "off",
"vue/multiline-html-element-content-newline":"off",
"vue/name-property-casing": ["error", "PascalCase"],
"vue/no-v-html": "off",
'accessor-pairs': 2,
'arrow-spacing': [2, {
'before': true,
'after': true
}],
// 解析： 禁止或强制在单行代码块中使用空格(禁用)
'block-spacing': [2, 'always'],
// 解析： 强制使用一致的缩进 第二个参数为 "tab" 时，会使用tab，
// if while function 后面的{必须与if在同一行，java风格。
'brace-style': [2, '1tbs', {
'allowSingleLine': true
}],
// 解析： 双峰驼命名格式
'camelcase': [0, {
'properties': 'always'
}],
// 解析： 数组和对象键值对最后一个逗号
// never参数：不能带末尾的逗号, always参数：必须带末尾的逗号，
// always-multiline：多行模式必须带逗号，单行模式不能带逗号
'comma-dangle': [2, 'never'],
// 控制逗号前后的空格
'comma-spacing': [2, {
'before': false,
'after': true
}],
// 控制逗号在行尾出现还是在行首出现 (默认行尾)
'comma-style': [2, 'last'],
// 强制在子类构造函数中用super()调用父类构造函数，TypeScrip的编译器也会提示
'constructor-super': 2,
// 强制所有控制语句使用一致的括号风格
'curly': [2, 'multi-line'],
// object, '.' 号应与对象名在同一行
'dot-location': [2, 'property'],
// 文件末尾强制换行
'eol-last': 2,
// 使用 === 替代 == allow-null允许null和undefined==
'eqeqeq': ["error", "always", {"null": "ignore"}],
'generator-star-spacing': [2, {
'before': true,
'after': true
}],
'handle-callback-err': [2, '^(err|error)$'],
'indent': [2, 2, {
'SwitchCase': 1
}],
'jsx-quotes': [2, 'prefer-single'],
'key-spacing': [2, {
'beforeColon': false,
'afterColon': true
}],
'keyword-spacing': [2, {
'before': true,
'after': true
}],
'new-cap': [2, {
'newIsCap': true,
'capIsNew': false
}],
'new-parens': 2,
'no-array-constructor': 2,
'no-caller': 2,
'no-console': 'off',
'no-class-assign': 2,
'no-cond-assign': 2,
'no-const-assign': 2,
'no-control-regex': 0,
'no-delete-var': 2,
'no-dupe-args': 2,
'no-dupe-class-members': 2,
'no-dupe-keys': 2,
'no-duplicate-case': 2,
'no-empty-character-class': 2,
'no-empty-pattern': 2,
'no-eval': 2,
'no-ex-assign': 2,
'no-extend-native': 2,
'no-extra-bind': 2,
'no-extra-boolean-cast': 2,
'no-extra-parens': [2, 'functions'],
'no-fallthrough': 2,
'no-floating-decimal': 2,
'no-func-assign': 2,
'no-implied-eval': 2,
'no-inner-declarations': [2, 'functions'],
'no-invalid-regexp': 2,
'no-irregular-whitespace': 2,
'no-iterator': 2,
'no-label-var': 2,
'no-labels': [2, {
'allowLoop': false,
'allowSwitch': false
}],
'no-lone-blocks': 2,
'no-mixed-spaces-and-tabs': 2,
'no-multi-spaces': 2,
'no-multi-str': 2,
'no-multiple-empty-lines': [2, {
'max': 1
}],
'no-native-reassign': 2,
'no-negated-in-lhs': 2,
'no-new-object': 2,
'no-new-require': 2,
'no-new-symbol': 2,
'no-new-wrappers': 2,
'no-obj-calls': 2,
'no-octal': 2,
'no-octal-escape': 2,
'no-path-concat': 2,
'no-proto': 2,
'no-redeclare': 2,
'no-regex-spaces': 2,
'no-return-assign': [2, 'except-parens'],
'no-self-assign': 2,
'no-self-compare': 2,
'no-sequences': 2,
'no-shadow-restricted-names': 2,
'no-spaced-func': 2,
'no-sparse-arrays': 2,
'no-this-before-super': 2,
'no-throw-literal': 0,
'no-trailing-spaces': 2,
'no-undef': 2,
'no-undef-init': 2,
'no-unexpected-multiline': 2,
'no-unmodified-loop-condition': 2,
'no-unneeded-ternary': [2, {
'defaultAssignment': false
}],
'no-unreachable': 2,
'no-unsafe-finally': 2,
'no-unused-vars': [2, {
'vars': 'all',
'args': 'none'
}],
'no-useless-call': 2,
'no-useless-computed-key': 2,
'no-useless-constructor': 2,
'no-useless-escape': 0,
'no-whitespace-before-property': 2,
'no-with': 2,
'one-var': [2, {
'initialized': 'never'
}],
'operator-linebreak': [2, 'after', {
'overrides': {
'?': 'before',
':': 'before'
}
}],
'padded-blocks': [2, 'never'],
'quotes': [2, 'single', {
'avoidEscape': true,
'allowTemplateLiterals': true
}],
// 要求或禁止使用分号而不是 ASI（这个才是控制行尾部分号的，）
'semi': [1, 'always'],
// 强制分号之前和之后使用一致的空格
'semi-spacing': [2, {
'before': false,
'after': true
}],
'space-before-blocks': [2, 'always'],
'space-before-function-paren': [2, 'never'],
'space-in-parens': [2, 'never'],
'space-infix-ops': 2,
'space-unary-ops': [2, {
'words': true,
'nonwords': false
}],
'spaced-comment': [2, 'always', {
'markers': ['global', 'globals', 'eslint', 'eslint-disable', '*package', '!', ',']
}],
'template-curly-spacing': [2, 'never'],
'use-isnan': 2,
'valid-typeof': 2,
'wrap-iife': [2, 'any'],
'yield-star-spacing': [2, 'both'],
'yoda': [2, 'never'],
'prefer-const': 2,
'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0,
'object-curly-spacing': [2, 'always', {
objectsInObjects: false
}],
'array-bracket-spacing': [2, 'never']
}
}vue项目中 .gitignore
.gitignore 文件的作用就是告诉git，push的时候忽略指定的文件夹或者文件；
例如：vue-cli脚手架创建的项目，push到github上时，不会上传node依赖文件夹，这是因为vue-cli脚手架创建的时候，自动为我们创建了 .gitignroe文件，并且为我们写好了规则。
注意：
.gitignore和.git文件夹是同一目录；
一定要push之前创建.gitignore文件，push之后创建.gitignore不用被git使用，因为git已经开始了版本控制。
.gitignore文件用于忽略文件，其规范如下：
- 1.所有空行或者以注释符号 ＃ 开头的行都会被 Git 忽略。
- 2.可以使用标准的 glob 模式匹配。
- 3.匹配模式最后跟反斜杠（/）说明要忽略的是目录。
- 4.要忽略指定模式以外的文件或目录，可以在模式前加上惊叹号（!）取反。
.DS_Store
node_modules/
dist/
npm-debug.log*
yarn-debug.log*
yarn-error.log*
**/*.log
tests/**/coverage/
tests/e2e/reports
selenium-debug.log
# Editor directories and files
.idea
.vscode
*.suo
*.ntvs*
*.njsproj
*.sln
*.local
package-lock.json
yarn.lockvue 项目中 .eslintignore
主要作用是忽略哪些文件的语法检查
build/.js //表示忽略build目录下类型为js的文件的语法检查
config/.js //表示忽略config目录下类型为js的文件语法检查
// 等等如下
build/*.js
src/assets
public
distvue 项目中.stylelintrc.js
css代码的语法检查 ，很少用到
vue 项目中 jsconfig.json
具体可看 jsconfig.json解析
vue 项目中 .editorconfig
注意：
vscode 安装依赖插件 EditorConfig for VS Code .editorconfig才会起作用。
# https://editorconfig.org
# 告诉EditorConfig插件，这是根文件，不用继续往上查找
root = true
# 匹配全部文件
[*]
# 设置字符集
charset = utf-8
# 缩进风格，可选"space"、"tab"
indent_style = tab
# 缩进的空格数
indent_size = 2
# 结尾换行符，可选"lf"、"cr"、"crlf"
end_of_line = lf
# 在文件结尾插入新行
insert_final_newline = true
# 删除一行中的前后空格
trim_trailing_whitespace = true还有其他的就不一一解释了，可自行百度
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
