持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第7天，点击查看活动详情
2.2 配置多环境
项目开发过程中，往往需要不同的配置来满足生产开发的需要，虽然写入大量的判断也可满足要求，但毕竟这种做法不那么优雅。使用 cross-env 与 dotenv，两个依赖配置项目的多环境。
安装：
pnpm install --save-dev cross-env dotenv
- cross-env： 多环境启动
- dotenv ：用于在代码中识别 .env 文件
在项目的跟目录添加4个文件：
.env 文件在任何环境下均启作用。在 .env 文件写入以下内容：
# 默认端口号
VITE_PORT = 3100
# 项目名称
VITE_GLOB_APP_TITLE = viet-project-name
.env.development 文件在开发环境下起作用，添加如下内容：、
# public path
VITE_PUBLIC_PATH = /
# 接口前缀
VITE_GLOB_API_URL_PREFIX=/api
.env.production 文件在生产环境下起作用，添加如下内容：、
# public path
VITE_PUBLIC_PATH = /admin
# 接口前缀
VITE_GLOB_API_URL_PREFIX=/api-prod
.env.staging 文件在预发布环境下起作用， 添加如下内容：、
# public path
VITE_PUBLIC_PATH = /staging
# 接口前缀
VITE_GLOB_API_URL_PREFIX=/api-prod
打包的时候默认使用 production 的配置，如果想要指定使用 staging 中的配置，更改 package.json 中的脚本命令，
"build": "cross-env NODE_ENV=production vite build",
"build:staging": "cross-env NODE_ENV=production vite build --mode staging",
2.3 代码风格
多人协作开发中为了保持代码风格一致，需要我们做如下配置：
安装
pnpm install --save-dev
prettier
eslint
eslint-define-config
eslint-config-prettier
eslint-plugin-prettier
eslint-plugin-vue
vue-eslint-parser
@typescript-eslint/eslint-plugin
@typescript-eslint/parser
包
- prettier 代码格式化
- eslint 代码规范检查
eslint 插件：
eslint-define-config可以帮助我们做语法提示- eslint-config-prettier 禁用所有与代码格式化相关的 eslint 规则
- eslint-plugin-prettier 解决eslint与prettier的兼容性问题，将 prettier 作为 eslint 规则运行
- eslint-plugin-vue vue 的语法检查插件
- vue-eslint-parser 解析器，对 .vue 文件 template 模板中复杂的表达式进行规则检测
typescript 的 eslint 插件
@typescript-eslint/eslint-plugin一个为TypeScript代码库提供lint规则的ESLint插件。see more@typescript-eslint/parser一个ESLint解析器，它利用TypeScript ESTree来允许ESLint检测TypeScript源代码。see more
在项目根目录创建 .eslintrc.js 文件，写入如下内容：
const { defineConfig } = require('eslint-define-config') // eslint-define-config
module.exports = defineConfig({
root: true,
env: {
browser: true,
node: true,
es6: true,
},
parser: 'vue-eslint-parser',
parserOptions: {
parser: '@typescript-eslint/parser',
ecmaVersion: 2020,
sourceType: 'module',
jsxPragma: 'React',
ecmaFeatures: {
jsx: true,
},
},
extends: [
'prettier', // eslint-config-prettier
'plugin:prettier/recommended', // eslint-plugin-prettier
'plugin:vue/vue3-recommended', // eslint-plugin-vue
'plugin:@typescript-eslint/recommended', // ts-eslint
],
rules: {
'vue/script-setup-uses-vars': 'error',
'@typescript-eslint/ban-ts-ignore': 'off',
'@typescript-eslint/explicit-function-return-type': 'off',
'@typescript-eslint/no-explicit-any': 'off',
'@typescript-eslint/no-var-requires': 'off',
'@typescript-eslint/no-empty-function': 'off',
'vue/custom-event-name-casing': 'off',
'no-use-before-define': 'off',
'@typescript-eslint/no-use-before-define': 'off',
'@typescript-eslint/ban-ts-comment': 'off',
'@typescript-eslint/ban-types': 'off',
'@typescript-eslint/no-non-null-assertion': 'off',
'@typescript-eslint/explicit-module-boundary-types': 'off',
'@typescript-eslint/no-unused-vars': [
'error',
{
argsIgnorePattern: '^_',
varsIgnorePattern: '^_',
},
],
'no-unused-vars': [
'error',
{
argsIgnorePattern: '^_',
varsIgnorePattern: '^_',
},
],
'space-before-function-paren': 'off',
'vue/attributes-order': 'off',
'vue/one-component-per-file': 'off',
'vue/html-closing-bracket-newline': 'off',
'vue/max-attributes-per-line': 'off',
'vue/multiline-html-element-content-newline': 'off',
'vue/singleline-html-element-content-newline': 'off',
'vue/attribute-hyphenation': 'off',
'vue/require-default-prop': 'off',
'vue/require-explicit-emits': 'off',
'vue/html-self-closing': [
'error',
{
html: {
void: 'always',
normal: 'never',
component: 'always',
},
svg: 'always',
math: 'always',
},
],
'vue/multi-word-component-names': 'off',
},
})
