The following are some commonly used configurations and plug-ins for projects
1. You can simply configure package.json, so that you can customize the running command to debug each environment
"scripts": {
"serve": "vite --mode development --host", //默认运行
"serve:dev": "vite --mode dev", // 运行开发环境
"serve:test": "vite --mode test", //运行测试环境
"serve:uat": "vite --mode uat",
"serve:prod": "vite --mode production",
"build:dev": "cross-env NODE_ENV=production vite build --mode dev",
"build:test": "cross-env NODE_ENV=production vite build --mode test",
"build:uat": "cross-env NODE_ENV=production vite build --mode uat",
"build:prod": "cross-env NODE_ENV=production vite build --mode production",
"lint": "eslint \"**/*.{vue,ts,js}\" --fix",
"preview": "vite preview"
},
Create a .env configuration, the .env configuration will be loaded by all environments, and will be overwritten by other environment .env configurations, pay attention to the uniformity of the file name, and the configuration parameters should preferably start with VUE_APP (for the vue project, if it is react, then Can write REACT_APP, and so on)
such as .env.development
# 本地开发
# 用于接入环境设置
VUE_APP_BUILD_MODE=dev
# 后端接口地址
VUE_APP_API_PROXY=https://dev-api.xxx.com
.env.production
# 正式开发
# 用于接入环境设置
VUE_APP_BUILD_MODE=production
# 后端接口地址
VUE_APP_API_PROXY=https://api.xxx.com // 看自己的接口api是什么
2. Commonly used dependency plug-ins for daily projects
such as: lodash and axios, less, scss, element ui, mobile phone vant, download the corresponding dependencies according to your own project requirements
The following are the dependencies of my own project requirements for reference only
"dependencies": {
"async-validator": "~1.8.1",
"axios": "^0.21.1",
"core-js": "^3.6.5",
"date-fns": "^2.19.0",
"element-ui": "^2.15.9",
"enhanced-enum": "^0.4.0",
"js-base64": "^3.6.0",
"js-cookie": "^2.2.1",
"lodash.debounce": "^4.0.8",
"lodash.keyby": "^4.6.0",
"lodash.omit": "^4.5.0",
"mathjs": "^9.3.2",
"moment": "^2.29.1",
"nzh": "^1.0.5",
"sls-wpk-reporter": "^1.0.41",
"sortablejs": "^1.14.0",
"umy-ui": "^1.1.6",
"uuid": "^8.3.2",
"viewerjs": "^1.9.0",
"vue": "^2.6.11",
"vue-print-nb": "^1.6.0",
"vue-router": "^3.5.3",
},
"devDependencies": {
"@vue/cli-plugin-babel": "~4.5.0",
"@vue/cli-plugin-eslint": "^4.5.9",
"@vue/cli-service": "~4.5.0",
"@vue/eslint-config-prettier": "^6.0.0",
"babel-eslint": "^10.1.0",
"cross-env": "^7.0.3",
"eslint": "^6.7.2",
"eslint-plugin-prettier": "^3.3.1",
"eslint-plugin-vue": "^6.2.2",
"lint-staged": "^10.5.4",
"sass": "^1.32.2",
"sass-loader": "^10.1.0",
"vue-auto-routing": "^1.0.1",
"vue-template-compiler": "^2.6.11"
}