vue3搭建配置

最新推荐文章于 2024-04-26 16:47:03 发布

M.LNG@li

最新推荐文章于 2024-04-26 16:47:03 发布

阅读量2.1k

点赞数 1

文章标签： vue.js 前端 vite

本文链接：https://blog.csdn.net/weixin_41262185/article/details/127298910

版权

下面是一些项目常用的配置及插件
1.可以简单配置一下package.json,这样可以实现自定义运行命令调试各个环境

"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"
  },

创建.env配置，.env配置会被所有环境加载，会被其他环境.env的配置覆盖，注意文件名字书写统一性,以及配置参数最好以VUE_APP开头的（vue项目的话，若为react，则可写REACT_APP,以此类推）
在这里插入图片描述
如 .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.日常项目常用的依赖插件
如：lodash和axios，less,scss ,element ui，手机端vant，根据自己项目需求下载对应依赖
下面是我自己项目需求的依赖仅供参考

"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"
}