vue脚手架 build-config文件夹(跨域/打包)相关配置
时间:2019-03-27
本文章向大家介绍vue脚手架 build-config文件夹(跨域/打包)相关配置,主要包括vue脚手架 build-config文件夹(跨域/打包)相关配置使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
1,跨域解决
点开 config文件夹下的index.js文件
找到 proxyTable(英文:代理-表格)下进行配置,如下(路径配置必须绝对路径)
build:{ // production 环境
env: require('./prod.env'), // 使用 config/prod.env.js 中定义的编译环境
index: path.resolve(__dirname, '../dist/index.html'), // 编译输入的 index.html 文件
assetsRoot: path.resolve(__dirname, '../dist'), // 编译输出的静态资源路径
assetsSubDirectory: 'static', // 编译时输出的二级目录(dist->static)
assetsPublicPath: '/', // 编译发布的根目录,可配置为资源服务器域名或 CDN 域名
productionSourceMap: true, // 是否开启 cssSourceMap
productionGzip: false, // 是否开启 gzip
productionGzipExtensions: ['js', 'css'] // 需要使用 gzip 压缩的文件扩展名
},
dev: { // dev 环境
env: require('./dev.env'), // 使用 config/dev.env.js 中定义的编译环境
port: 8080, // 运行测试页面的端口
assetsSubDirectory: 'static', // 编译输出的二级目录
assetsPublicPath: '/', // 编译发布的根目录,可配置为资源服务器域名或 CDN 域名
proxyTable: {
'/xxxx': {
target: 'http://192.168.11.11/xxxxx', // 接口的域名
// secure: false, // 如果是https接口,需要配置这个参数
changeOrigin: true, // 如果接口跨域,需要进行这个参数配置
pathRewrite: {
'^/xxxxxx': '/'
}
},
}, // 需要 proxyTable 代理的接口(可跨域)
cssSourceMap: false // 是否开启 cssSourceMap
}
页面调用
let JAVA2API = 'xxxxx' export default { name: "CustomerNew", data() { return { JAVA2API, } }
打包配置
一个项目的开发调试过程肯定不止开发环境和生产环境,由于缺少环境常量,我们就常常需要手动修改URL,进而导致如果项目存在多个环境时,多出的环境没办法自动化构建
可以通过webpack进行配置,下面是自己理解的图
添加env-config.js文件
我们可以利用process对象,获取启动Node.js进程时的命令行参数(process.argv),匹配当前开发或生产的环境常量挂载到process.env。
env-config.js
/* @多环境开发配置 by haibao 使用方法示例: ----打包: 打包dev环境:npm run build --dev 打包test环境:npm run build --test 打包pro环境:npm run build --pro ----本地运行: 本地运行dev环境:npm run dev --dev 本地运行test环境:npm run dev --test 无【--xxx】参数,则默认为dev环境:npm run dev */ 'use strict' const chalk = require('chalk') // const path = require('path') /* * 环境列表,第一个环境为默认环境 * @envName: 指明现在使用的环境 * @baseUrl: 这个环境下面的api 请求的域名 * */ const ENV_LIST = [ { // 开发环境 envName: 'dev', baseUrl: '/xxxxx', }, { // 测试环境 envName: 'test', baseUrl: '/xxxxx, }, { // 生产环境(命令行参数(process.arg)中prod是保留字,所以使用pro) envName: 'pro', baseUrl: '/xxxxx', } ] // 获取命令行参数: http://nodejs.cn/api/process.html#process_process_argv //利用process对象,获取启动Node.js进程时的命令行参数(process.argv),匹配当前开发或生产的环境常量挂载到process.env。 const argv = JSON.parse(process.env.npm_config_argv).original || process.argv const HOST_ENV = argv[2] ? argv[2].replace(/[^a-z]+/ig, '') : 'dev' // 没有设置环境,则默认为第一个 const HOST_CONF = HOST_ENV ? ENV_LIST.find(item => item.envName === HOST_ENV) : ENV_LIST[0] // 把环境常量挂载到process.env方便客户端使用 process.env.BASE_URL = HOST_CONF.baseUrl // log选中的变量 console.log(chalk.green('当前环境对应的常量:')) console.log(HOST_CONF) module.exports = { HOST_CONF, ENV_LIST }
然后分别在webpack.dev.conf.js / webpack.prod.conf.js 配置变量 位置在
plugins:[]下的
new webpack.DefinePlugin方法
如下配置 plugins: [ // http://vuejs.github.io/vue-loader/en/workflow/production.html new webpack.DefinePlugin({ 'process.env.BASE_URL': '\"' + process.env.BASE_URL + '\"',}), ]
两个文件配制方法相同
然后打开发环境的包就敲 npm run build
测试环境 npm run build --test
生产环境 npm run build --pro
- iOS多线程——你要知道的NSOperation都在这里你要知道的iOS多线程NSThread、GCD、NSOperation、RunLoop都在这里
- iOS多线程——你要知道的NSThread都在这里你要知道的iOS多线程NSThread、GCD、NSOperation、RunLoop都在这里
- KVO、Delegate、Notification 区别及相关使用场景你要知道的KVC、KVO、Delegate、Notification都在这里
- Core ML简介及实时目标检测及Caffe TensorFlow coremltools模型转换
- iOS网络——NSURLSession详解及SDWebImage源码解析你要知道的NSURLSession都在这里
- BZOJ3585: mex(主席树)
- 01.LoT.UI 前后台通用框架分解系列之——小图片背景全屏显示(可自动切换背景)
- 02.LoT.UI 前后台通用框架分解系列之——灵活的菜单栏
- 05.LoT.UI 前后台通用框架分解系列之——漂亮的时间选择器
- 06.LoT.UI 前后台通用框架分解系列之——浮夸的图片上传
- 07.LoT.UI 前后台通用框架分解系列之——轻巧的文本编辑器
- 07.LoT.UI 前后台通用框架分解系列之——强大的文本编辑器
- 洛谷P3358 最长k可重区间集问题(费用流)
- 08.LoT.UI 前后台通用框架分解系列之——多样的Tag选择器
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法