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