vue.config.js不用配置proxy 直接在.env.test / .env.pre-release / .env.production 中配置如下：
// 以测试为例 其它环境如同
NODE_ENV = 'test'
VUE_APP_API_URL='http:https://172.22.0.62:8082/'
VUE_APP_CURRENTMODE= 'test'
直接在API中process.env.VUE_APP_API_URL就能获取
文件主要作用| dist | 在執行“npm run build所打包的文件夾” |
| public/index.html | 首页模板 |
| src | 源码目录。包括assets(模块资源)、components(公共组件)、App.vue(页面入口文件)、main.js(入口文件，加载组件)、router.js(路由配置)、store.js(状态管理) |
| .env.test | 测试环境配置文件。根据package.json中的配置项进行打包，这里是执行“npm run build:test” |
| .env.pre-release | 预发布环境配置文件。根据package.json中的配置项进行打包，这里是执行“npm run build:pre-pelesae” |
| .env.production | 正式环境配置文件。根据package.json中的配置项进行打包，这里是执行“npm run build:production” |
| vue.config.js | webpack配置文件，可用于修改默认的配置文件。 |
| .eslintrc.js | ES-lint校验 |
| .gitignore | git忽略上传的文件格式 |
| babel.config.js | babel语法编译 |
| package.json | 项目基本信息，在”scripts“配置运行环境 |
| postcss.config.js | css预处理器（此处默认启用autoprefixer） |
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
文件主要作用| baseUrl | 从vue-cli3.3起已弃用，请使用publicPath |
| publicPath | 部署应用包时的基本URL。如：process.env.NODE_ENV === 'production' ? '/online/' : './' |
| outputDir | 打包后生成的文件夹 |
| assetsDir | 放置生成的静态资源的目录 |
| lintOnSave | 代码校验，安装@vue/cli-plugin-eslint有效 |
| runtimeCompiler | 是否使用包含运行时编译器的Vue构建版本。设置为true就可以使用template |
| productionSourceMap | 生产环境是否生成sourceMap文件。 sourceMap：针对打包后代码进行处理，就是一个信息文件，里面存储着位置信息。也就是说，转换后的代码的每一个位置，所对应的转换前的位置。有了它，出错的时候，除错工具将直接显示原始代码，而不是转换后的代码。 |
| chainWebpack | 是一个函数，会接收一个基于webapck-chain实例，对内部的webpack配置进行更细粒度的修改。如： chainWebpack: config => { config.module.rule("images").use("url-loader") .tap(options =>merge(options, { limit: xxx })); }//允许我们更细粒度的控制 webpack 的内部配置,例如： 以上操作我们可以成功修改 webpack 中 module 项里配置 rules 规则为图片下的 url-loader 值，将其 limit 限制改为 xxxM |
| configureWebpack | 针对开发阶段、上线后配置的不同之处做出处理。比如去除代码中的console.log、关闭错误报告。如： configureWebpack: config => { if (process.env.NODE_ENV === 'production') { // 为生产环境修改配置... config.plugins.push( new BundleAnalyzerPlugin() //webpack打包性能分析插件 ); } else { // 为开发环境修改配置... } } |
| css.extract | 是否将组件中的CSS提取至一个独立的CSS文件中（而不是动态注入到javascript中的inline代码）。 |
| css.sourceMap | 是否为CSS开启sourceMap。 |
| css.loaderOptions | 向CSS相关的loader传递选项。可配置loader,支持loader有：css-loader、less-loader、scss-loader... |
| css.modules | 可以将*.(less/scss/stylus)文件视为CSS Modules模块。 |
| devServer | 代理配置参数，所有webpack-dev-server的选项都支持。hot(热加载)、host(ip)、port(端口)、https(https协议)、open(自动打开浏览器) |
| devServer.proxy | 代理配置。前端应用和后端API服务器没有运行在同一主机上，你需要在开发环境下将请求代理到API服务器。与vue-cli2.x代理配置类似。如：
proxy: { '/api': { //本地 target: 'http:https://192.168.102.13:8080/', // 如果要代理 websockets ws: true, changeOrigin: true }, '/test': { //测试 target: 'http:https://172.22.0.58:8082/' }, '/pre-release': { //预发布 target: 'http:https://xxx.com/' }, '/production': { //正式 target: 'http:https://xxx.com/' } } |
1.环境名应该与环境文件统一 (根目录创建的.env.xxx需要与各环境变量相同。)
2.环境文件放置根目录下
3.除了baseUrl和NODE_ENV其他环境使用VUE_APP开头
yarn serve
yarn build:production
yarn build:test
yarn build:pre-environment
yn run lint
yarn run test:unit