vue-cli2:区分开发、测试、生产环境

本文详细介绍如何在基于Vue CLI2构建的项目中增设测试环境,包括修改package.json、复制并调整build和webpack配置文件,以及在config文件中定义不同环境的代码。

本文适合使用vue-cli2搭建的项目,vue-cli3取消了build和config文件夹,不适用此方法。

3请移步 https://blog.youkuaiyun.com/yuyuking/article/details/100323068

用vue-cli2构建完项目后,只有一个开发环境dev和生产环境prod,现在我们要加一个测试环境 test

1、首先在package.json增加一个test启动项,可以使用npm run test打包测试代码

复制build代码,做如下更改

2、接下来要建一个build_test.js,在build文件夹复制一份build.js更名为build_test.js,做如下修改

3.上方代码需要引入webpack.test.conf,那么在build文件夹下复制一份webpack.prod.conf.js更名为webpack.test.conf.js,修改如下

把所有的config.build替换为config.test,在此文件里全部替换即可,webstom快捷键ctrl+r

4、接上面,config.build改为了confog.test,那么需要建一个test文件。在config文件夹中复制dev.env.js(注意是dev),改名为test.env.js

可以在这个地方,定义开发、测试、生产环境不同的代码,比如ajax的baseUrl

从上往下依次是开发—>生产—>测试

值得注意的是,如果在这里面修改了配置项,本地开发的时候需要重新运行npm run dev

5、在config中的index.js添加一个test启动项,复制build即可

6、最后需要修改一下webpack.base.conf.js里面的assetsPublicPath,防止test打包的时候路径错误

把原来的assetsPublicPath路径进行修改

至此,开发、测试、生产环境的区分就全部完成了

开发:npm run dev

测试:npm run test

生产:npm run build

{ "name": "yhl-vue-antd", "version": "0.1.0", "private": true, "scripts": { "serve": "vue-cli-service serve", "build:dev": "vue-cli-service build --mode development", "build:test": "vue-cli-service build --mode test", "build:prod": "vue-cli-service build --mode production", "build-report": "vue-cli-service build --report", "test:unit": "vue-cli-service test:unit ", "lint": "vue-cli-service lint" }, "dependencies": { "ansi_up": "^5.2.1", "ant-design-vue": "^1.6.5", "axios": "^0.19.2", "clipboard": "^2.0.6", "copy-webpack-plugin": "4.6.0", "core-js": "^3.6.5", "crypto-js": "^4.0.0", "crypto.js": "^2.0.2", "echarts": "^4.8.0", "echarts-liquidfill": "^2.0.6", "echarts-wordcloud": "^1.1.3", "element-ui": "^2.15.10", "esri-loader": "^2.16.0", "file-saver": "^2.0.5", "js-cookie": "^3.0.1", "lodash": "^4.17.21", "mockjs": "^1.1.0", "moment": "^2.29.1", "normalize.css": "^8.0.1", "nprogress": "^0.2.0", "ol": "^6.1.1", "photo-sphere-viewer": "^4.0.7", "pubsub-js": "^1.9.4", "screenfull": "^5.0.2", "vue": "^2.6.11", "vue-count-to": "^1.0.13", "vue-cropper": "^0.5.6", "vue-grid-layout": "file:vue-grid-layout-2.3.7-sp1.tgz", "vue-grid-layout-cus": "file:vue-grid-layout-cus-2.3.72.tgz", "vue-i18n": "^8.28.2", "vue-json-viewer": "^2.2.19", "vue-router": "^3.2.0", "vue-seamless-scroll": "^1.1.21", "vuedraggable": "^2.24.3", "vuex": "^3.4.0", "xlsx": "^0.16.0", "yhlcomponents": "file:yhlcomponents-1.3.2-sp9.tgz", "yhlcomponents-codemirror": "file:yhlcomponents-codemirror-1.1.0.tgz", "yhlcomponents-gantt": "file:yhlcomponents-gantt-1.1.0.tgz", "yhlcomponents-lowcode": "file:yhlcomponents-lowcode-1.0.0-sp5.tgz" }, "devDependencies": { "@vue/cli-plugin-babel": "^4.4.0", "@vue/cli-plugin-eslint": "^4.4.0", "@vue/cli-plugin-router": "^4.4.0", "@vue/cli-plugin-unit-jest": "^4.4.0", "@vue/cli-plugin-vuex": "^4.4.0", "@vue/cli-service": "^4.4.0", "@vue/eslint-config-prettier": "^6.0.0", "@vue/test-utils": "^1.0.3", "babel-eslint": "^10.1.0", "chalk": "^4.1.0", "compression-webpack-plugin": "^6.1.1", "eslint": "^6.7.2", "eslint-plugin-prettier": "^3.1.3", "eslint-plugin-vue": "^6.2.2", "node-sass": "^4.12.0", "prettier": "^1.19.1", "sass-loader": "^8.0.2", "script-loader": "^0.7.2", "svg-sprite-loader": "^5.0.0", "uglifyjs-webpack-plugin": "^2.2.0", "vue-template-compiler": "^2.6.11", "webpack-bundle-analyzer": "^4.2.0" } }
10-29
你提供的 `package.json` 是一个典型的 **Vue CLI 项目配置文件**,用于构建一个基于 Vue 2 的企业级前端项目(`yhl-vue-antd`),集成了 Ant Design Vue、Element UI、ECharts、MockJS 等多种组件库工具。 --- ### ✅ 项目特征分析 | 特性 | 说明 | |------|------| | **Vue 2 + Vue CLI** | 使用 `@vue/cli-service` 构建,版本为 `^4.4.0`,对应 Vue 2 生态 | | **UI 框架** | 同时使用了 `ant-design-vue@1.6.5` `element-ui@2.15.10`,可能是为了兼容历史组件 | | **多环境构建** | 定义了 `development` / `test` / `production` 三种构建模式 | | **本地依赖包** | 多个 `.tgz` 文件形式的私有组件库(如 `yhlcomponents`, `vue-grid-layout-cus`),说明是内部封装的可复用模块 | | **构建优化** | 引入了 `compression-webpack-plugin`(gzip 压缩)、`webpack-bundle-analyzer`(打包体积分析)等 | --- ### 🔧 脚本命令详解 ```json "scripts": { "serve": "vue-cli-service serve", "build:dev": "vue-cli-service build --mode development", "build:test": "vue-cli-service build --mode test", "build:prod": "vue-cli-service build --mode production", "build-report": "vue-cli-service build --report", "test:unit": "vue-cli-service test:unit", "lint": "vue-cli-service lint" } ``` #### 📌 `serve` 启动开发服务器,默认端口 `8080`,热重载、代理配置等可通过 `vue.config.js` 控制。 #### 📌 `build:dev` / `build:test` / `build:prod` 使用不同 `.env` 文件进行环境区分- `.env.development` → `development` 模式 - `.env.test` → `test` 模式 - `.env.production` → `production` 模式 可用于设置不同的 API 地址、是否开启 mock 等。 #### 📌 `build-report` 生成可视化打包报告,帮助分析哪些模块体积过大。 需要配合 `vue.config.js` 配置启用: ```js // vue.config.js module.exports = { configureWebpack: process.env.npm_lifecycle_event === 'build-report' ? { devtool: 'source-map', plugins: [ new (require('webpack-bundle-analyzer').BundleAnalyzerPlugin)() ] } : undefined } ``` #### 📌 `test:unit` 运行单元测试(Jest + @vue/test-utils) 示例测试文件位置: ``` tests/unit/Example.spec.js ``` #### 📌 `lint` 执行 ESLint 校验,规则来自: - `@vue/eslint-config-prettier` - `eslint-plugin-vue` - `.eslintrc.js` 中自定义规则 --- ### 💡 私有依赖说明(`.tgz` 文件) ```json "yhlcomponents": "file:yhlcomponents-1.3.2-sp9.tgz", "vue-grid-layout-cus": "file:vue-grid-layout-cus-2.3.72.tgz" ``` 这些是本地打包的 npm 包,通常通过以下方式发布: ```bash # 在组件目录下打包 npm pack # 得到 .tgz 文件,复制到主项目中引用 ``` > ⚠️ 注意:这类依赖不会上传到 Git,需确保团队成员都能获取 `.tgz` 文件,或建议改用私有 npm 仓库(如 Verdaccio、Nexus)管理。 --- ### ✅ 推荐优化建议 #### 1. 升级 Vue CLI 到最新稳定版(可选) 当前使用的是 Vue CLI 4.x,建议升级到 5.x(支持 Webpack 5)以提升构建性能: ```bash npm install @vue/cli-service@latest ``` #### 2. 统一 UI 框架(避免同时引入 Element UI Ant Design Vue) 两者都较大,可能导致样式冲突包体积膨胀。建议选择其一。 #### 3. 配置 `vue.config.js` 示例(常用功能) ```js // vue.config.js const CompressionPlugin = require('compression-webpack-plugin') const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin module.exports = { publicPath: './', outputDir: 'dist', assetsDir: 'static', lintOnSave: process.env.NODE_ENV !== 'production', devServer: { port: 8080, open: true, proxy: { '/api': { target: 'http://localhost:3000', changeOrigin: true, pathRewrite: { '^/api': '' } } } }, configureWebpack: config => { const plugins = [] if (process.env.npm_lifecycle_event === 'build-report') { plugins.push(new BundleAnalyzerPlugin()) } if (process.env.NODE_ENV === 'production') { plugins.push( new CompressionPlugin({ algorithm: 'gzip', test: /\.(js|css|html|svg)$/, threshold: 8192, deleteOriginalAssets: false }) ) } return { plugins } } } ``` ---
评论 3
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值