vue打包详情
说明
本文代码中的配置基于vue-cli2
需求
在实际开发中我们可能有测试环境一套请求API 和 正式环境一套API,尤其是两个环境的域名不同时,就需要我们分环境打不同配置的包
了解 webpack.DefinePlugin 插件
DefinePlugin 此插件可以在打包时定义环境变量,在开发时我们也能在代码中获取定义的环境变量。
用法:
单独配置
plugins: [
new webpack.DefinePlugin({
'process.env.mode': '"development"'
})
...
]
写成对象
plugins: [
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: '"development"',
EVN_CONFIG: '"dev"',
API_ROOT: '"dev API_ROOT"'
}
})
...
]
写成配置文件
plugins: [
new webpack.DefinePlugin({
'process.env': require('../config/dev.env')
})
...
]
// /config/dev.env.js
'use strict'
const merge = require('webpack-merge')
const prodEnv = require('./prod.env')
module.exports = merge(prodEnv, {
NODE_ENV: '"development"',
EVN_CONFIG: '"dev"',
API_ROOT: '"dev API_ROOT"'
})
在vue-cli2 中/build/webpack.dev.conf.js
文件引用了 /config/dev.env.js
文件的配置作为环境变量,因此我们执行npm run dev
时(执行/build/webpack.dev.conf.js
)就可以在我们开发代码中获得环境变量(console.log(process.env)
试一试)
然后我们观察/build/webpack.prod.conf.js
(npm run build时执行)
// /build/webpack.prod.conf.js
const env = require('../config/prod.env')
...
new webpack.DefinePlugin({
'process.env': env
}),
可见打包时使用的是/build/webpack.prod.conf.js
文件配置作为环境变量
安装 cross-env
npm install --save-dev cross-env
cross-env 统一了不同操作系统设置环境变量的方式.
用法:
"scripts": {
"build": "node build/build.js",
"build:test": "cross-env NODE_ENV=production env_config=test node build/build.js", //设置了环境变量 NODE_ENV 和 env_config
"build:prod": "cross-env NODE_ENV=production env_config=prod node build/build.js", //设置了环境变量 NODE_ENV 和 env_config
}
开始配置
由上面分析,我们得到,要分环境打包,我们针对不同的环境去配置不同的环境变量就可以了。
我们先修改scripts脚本
// package.json
"scripts": {
"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
"start": "npm run dev",
"build": "node build/build.js",
"build:test": "cross-env NODE_ENV=production env_config=test node build/build.js",
"build:prod": "cross-env NODE_ENV=production env_config=prod node build/build.js"
},
我们设置了两个环境变量 NODE_ENV
和 env_config
然后执行正常的打包。这里的环境变量设置是方便我们在webpack配置文件中使用
新建环境变量文件
新建 在/config
目录下新建test.env.js
文件存放test的环境变量
// /config/test.env.js
'use strict'
module.exports = {
NODE_ENV: '"testing"',
EVN_CONFIG:'"test"',
API_ROOT:'"/test/apis/v1"'
}
修改 webpack.prod.config.js
我门注释掉
//const env = require('../config/prod.env')
修改成
//const env = require('../config/prod.env')
const env_config = process.env.env_config || ''; //执行不同的打包脚本对应不同的env_config值
switch (env_config){
case 'test':
var env= require('../config/test.env');
break;
case 'prod':
var env= require('../config/prod.env');
break;
default:
var env= require('../config/prod.env');
}
...
在代码中使用
// Home.vue
axios.get(process.env.API_ROOT) ...
在不同环境中使用CDN
webpack 提供一个非常有用的配置,该配置能帮助你为项目中的所有资源指定一个基础路径。它被称为公共路径(publicPath)
我们修改webpack中的 publicPath 来让资源引用地址改为cdn
观察vue-cli我门发现publicPath写在了 /config/index.js
文件的build对象中,所以我们修改如下
...
const testCDN = 'https://testcdn.com';
const prodCDN = 'https://prodcdn.com';
build: {
assetsPublicPath: process.env.env_config=='test'?testCDN:prodCDN
}
也可以将cdn地址统一写在上文中的环境配置文件中
var prodEnv = require('./prod.env');
var testEnv = require('./test.env');
...
build: {
assetsPublicPath: process.env.env_config=='test'?testEnv.FILE_CDN:prodEnv.FILE_CDN,
}
总结
整体思路就是建不同的打包脚本,然后根据不同的打包脚本,应用相应的环境变量配置文件
vue打包详情的更多相关文章
- Vue打包后出现一些map文件
Vue打包后出现一些map文件的解决办法: 问题: 可能很多人在做vue项目打包,打包之后js中,会自动生成一些map文件,那我们怎么把它去掉不要呢? 1,运行 cnpm run build 开始 ...
- cordova+vue打包webapp
使用cordova+vue打包webapp,可以快速给网页套上一个android和ios壳子,完成一个app的开发. 1. 环境准备. (1)node.js 下载地址: https://nodejs ...
- Vue打包优化之分析工具webpack-bundle-analyzer
// 1. 安装 cnpm install webpack-bundle-analyzer --save-dev // 2. 在/build/webpack.prod.conf.js文件中引入 con ...
- vue打包app嵌入h5,区分app进入和android,ios显示不同的下载链接
vue打包app嵌入h5,区分app进入和android,ios显示不同的下载链接 需求:自己app打开的登录页面不显示app下载链接.其他地方打开判断android手机的跳转到android下载页链 ...
- vue打包上传oss
今天把vue打包之后上传到oss,遇到了一点问题,现在解决了总结一下心得: OSS (Object Storage Service)名为对象存储,配合cdn使用达到静态文件托管加速,提升网站文件访问速 ...
- VUE 打包后关于 -webkit-box-orient: vertical; 消失,导致多行溢出不管用问题
VUE 打包后 -webkit-box-orient: vertical; 样式消失,导致页面样式爆炸,看了看解决方案,在这里总结一下: 实际上是 optimize-css-assets-webpac ...
- vue打包以及在Apache环境下的配置
vue打包,我们都清楚,实在记不住命令的可以去package.json中看: npm run build 打包后会生成dist文件夹,将dist文件夹下的所有文件复制到Apache下的www的文件夹下 ...
- vue打包静态资源路径不正确的解决办法
vue打包静态资源路径不正确的解决办法 vue项目完成打包上线的时候会碰到静态资源找不到的问题,常见的有两个 1.js,css路径不对 解决办法:打开config/index.js,将其中的asset ...
- vue打包后运行在本地/非服务器端环境的访问路径
vue打包前的配置: 项目目录下--> config文件夹---> index.js: build: { assetsPublickPath: './', // 设置成相对路径 ...
随机推荐
- Qt下载(多种下载通道+所有版本)
http://c.biancheng.net/view/3851.html Qt 体积很大,有 1GB~3GB,官方下载通道非常慢,相信很多读者会崩溃,所以建议大家使用国内的镜像网站(较快),或者使用 ...
- Ubuntu18 给terminal改个漂亮的命令行提示符
重新安装了VMware和Ubuntu,但是命令行提示符太单调,不美观,如何更改呢.于是在网上巴拉巴拉搜寻一番. 1.更改PS1环境变量,这俩都可以,我选择第一个: export PS1="\ ...
- git分支管理和工作流规范:不同场景细化和演示
https://www.iteye.com/blog/qqtalk-2415889 前两篇介绍了 git基本概念 和 具体的规范,本篇针对不同的使用场景做演示. 分支 分支命名 master 分支名称 ...
- RabbitMQ发送消息成功,但是接受不到消息
commom模块为mq配置模块 分了多模块后消息队列无法自动创建,发现原因竟然是SpringBoot没有扫描到common模块内的配置类. 我们在XxxApplication启动类上添加@Compon ...
- 表单-angular
模板表单: <form #myform="ngForm" (ngSubmit)="onsubmit(myform.value)" > <div ...
- MongoDB之$关键字,以及$修饰器$set,$inc,$push,$pull,$pop
一.查询中常见的 等于 大于 小于 大于等于 小于等于 等于:在MongoDB中,什么字段等于什么值就是" : ",比如 "name":"路飞学城&q ...
- SpringBoot整合AOP
一.创建LogComponent类 类上加上@Component和@Aspect 表示把该类注册成spring组件和aop 二.创建6个方法 2.1 @Poin ...
- Spring IOC 实现方式
Spring 中的 org.springframework.beans 包和 org.springframework.context 包构成了 Spring 框架 IoC 容器的基础. BeanFac ...
- 事物Spring boot @Transactional
事物:dr @Override @UDS(value="fq") @Transactional public BaseResultMessage testTransactional ...
- 《x86汇编语言:从实模式到保护模式 》学习笔记之:第一次编写汇编语言
1.汇编语言源文件:first.asm mov ax,0x3f add bx,ax add cx,ax 2.用nasm编译成二进制文件:first.bin nasm -f bin first.asm ...