1.package.json

{
"name": "element-starter",
"description": "A Vue.js project",
"author": "yi.shyang@ele.me",
"private": true,
"scripts": {
"dev:test": "cross-env TARGET=test webpack-dev-server --inline --hot --env.dev",
"dev:prod": "cross-env TARGET=prod webpack-dev-server --inline --hot --env.dev",
"build:test": "cross-env TARGET=test rimraf dist && webpack -p --progress --hide-modules",
"build:prod": "cross-env TARGET=prod rimraf dist && webpack -p --progress --hide-modules",
"start": "ws -z -d dist"
},
"dependencies": {
"axios": "^0.18.0",
"cross-env": "^5.2.0",
"element-ui": "^2.3.4",
"local-web-server": "^2.6.0",
"moment": "^2.22.2",
"vue": "^2.5.16",
"vue-qr": "^1.5.2",
"vue-router": "^3.0.1"
},
"engines": {
"node": ">=6"
},
"devDependencies": {
"autoprefixer": "^6.6.0",
"babel-core": "^6.24.1",
"babel-loader": "^6.4.0",
"babel-preset-vue-app": "^1.2.0",
"css-loader": "^0.27.0",
"file-loader": "^0.10.1",
"html-webpack-plugin": "^2.24.1",
"postcss-loader": "^1.3.3",
"rimraf": "^2.5.4",
"style-loader": "^0.13.2",
"url-loader": "^0.5.8",
"vue-loader": "^13.3.0",
"vue-template-compiler": "^2.5.16",
"webpack": "^2.4.1",
"webpack-dev-server": "^2.4.2"
}
}

2. webpack.config.js

const resolve = require('path').resolve
const webpack = require('webpack')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const url = require('url')
const publicPath = '' module.exports = (options = {}) => ({
entry: {
vendor: './src/vendor',
index: './src/main.js'
},
output: {
path: resolve(__dirname, 'dist'),
filename: options.dev ? '[name].js' : '[name].js?[chunkhash]',
chunkFilename: '[id].js?[chunkhash]',
publicPath: options.dev ? '/assets/' : publicPath
},
module: {
rules: [{
test: /\.vue$/,
use: ['vue-loader']
},
{
test: /\.js$/,
use: ['babel-loader'],
exclude: /node_modules/
},
{
test: /\.css$/,
use: ['style-loader', 'css-loader', 'postcss-loader']
},
{
test: /\.(png|jpg|jpeg|gif|eot|ttf|woff|woff2|svg|svgz)(\?.+)?$/,
use: [{
loader: 'url-loader',
options: {
limit: 10000
}
}]
}
]
},
plugins: [
new webpack.optimize.CommonsChunkPlugin({
names: ['vendor', 'manifest']
}),
new webpack.DefinePlugin({
__TARGET__: JSON.stringify(process.env.TARGET || 'prod')
}),
new HtmlWebpackPlugin({
template: 'src/index.html'
})
],
resolve: {
alias: {
'~': resolve(__dirname, 'src'),
'@': resolve('src')
},
extensions: ['.js', '.vue', '.json', '.css']
},
devServer: {
host: '0.0.0.0',
port: 8010,
proxy: {
'/api/': {
target: 'http://0.0.0.0:8080',
changeOrigin: true,
pathRewrite: {
'^/api': ''
}
}
},
historyApiFallback: {
index: url.parse(options.dev ? '/assets/' : publicPath).pathname
}
},
devtool: options.dev ? '#eval-source-map' : '#source-map'
})

3.api.js

axios.defaults.baseURL = 'test.com'

if (__TARGET__ === 'prod') {
axios.defaults.baseURL = 'prod.com'
}

vue+element 切换正式和测试环境的更多相关文章

  1. webpack正式、测试环境接口地址本地运行及打包命令配置

    声明:本文由w3h5原创,转载请注明出处:<webpack正式.测试环境接口地址本地运行及打包命令配置> https://www.w3h5.com/post/521.html 为了方便开发 ...

  2. 《吐血整理》高级系列教程-吃透Fiddler抓包教程(25)-Fiddler如何优雅地在正式和测试环境之间来回切换-下篇

    1.简介 在开发或者测试的过程中,由于项目环境比较多,往往需要来来回回地反复切换,那么如何优雅地切换呢?宏哥今天介绍几种方法供小伙伴或者童鞋们进行参考. 2.实际工作场景 2.1问题场景 (1)已发布 ...

  3. 《吐血整理》高级系列教程-吃透Fiddler抓包教程(24)-Fiddler如何优雅地在正式和测试环境之间来回切换-中篇

    1.简介 在开发或者测试的过程中,由于项目环境比较多,往往需要来来回回地反复切换,那么如何优雅地切换呢?宏哥今天介绍几种方法供小伙伴或者童鞋们进行参考. 2.实际工作场景 2.1问题场景 (1)已发布 ...

  4. 《吐血整理》高级系列教程-吃透Fiddler抓包教程(23)-Fiddler如何优雅地在正式和测试环境之间来回切换-上篇

    1.简介 在开发或者测试的过程中,由于项目环境比较多,往往需要来来回回地反复切换,那么如何优雅地切换呢?宏哥今天介绍几种方法供小伙伴或者童鞋们进行参考. 2.实际工作场景 2.1问题场景 (1)已发布 ...

  5. SpringBoot+SpringCloud+vue+Element开发项目——搭建开发环境

    1.新建一个项目

  6. 无需编译app切换线上、测试环境

    在咱们测试过程中,经常需要切换测试环境和线上环境.大致有如下几个方案. 一.服务器地址编译到app中 此种方式需要在代码里保存两套配置,一套指向线上,一套指向测试.通过编译参数分别生成测试包.线上包. ...

  7. 服务端测试环境hosts配置检查脚本

    [本文出自天外归云的博客园] 问题 由于A测试环境和B测试环境相互耦合,B测试环境切换导致我方测试环境需要更改后台服务器的响应配置.若多台服务器中有一台服务器没有更改配置,则在测试过程中将会出现问题. ...

  8. vue分别打包测试环境和正式环境

    vue打包时使用不同的环境变量 需求 同一个项目通过打包使用不同的环境变量,目前的环境有三个: 一.本地------开发环境 二.线上------测试环境 三.线上------正式环境 我们都知道vu ...

  9. iOS如何在一个包上切换正式环境和测试环境

    最近项目处于测试阶段,所以免不了每天都得打包给测试人员,由于我们公司规模比较大,项目环境也分为了三种:测试环境.预上线(预生产)环境.上线(生产)环境.所以每到了测试后期,每天打包的时间也占了不少,遇 ...

随机推荐

  1. 2018-2019-20172321 《Java软件结构与数据结构》第六周学习总结

    2018-2019-20172321 <Java软件结构与数据结构>第六周学习总结 教材学习内容总结 第10章 树 10.1概述 树由一个包含结点和边的集构成,其中的元素被储存在这些结点中 ...

  2. c# 写文件注意问题及用例展示

    以txt写string举例,正确代码如下: private void xie() { FileStream fs = new FileStream("1.txt", FileMod ...

  3. 软工1816 · Beta冲刺(5/7)

    团队信息 队名:爸爸饿了 组长博客:here 作业博客:here 组员情况 组员1(组长):王彬 过去两天完成了哪些任务 推进后端完成安卓端接口的开发 在测试中发现返回地图接口存在错误(待修复) 推进 ...

  4. Leetcode题库——26.删除排序数组中的重复项

    @author: ZZQ @software: PyCharm @file: removeDuplicates.py @time: 2018/9/23 13:51 要求: 给定一个排序数组,你需要在原 ...

  5. windows下的C++ socket服务器(3)

    int make_server_socket(int port) { WSADATA inet_WsaData; WSAStartup(MAKEWORD(), &inet_WsaData); ...

  6. js 对象的合并(3种方法)转载

    对象的合并 需求:设有对象 o1 ,o2,需要得到对象 o3 var o1 = { a:'a' }, o2 = { b:'b' }; // 则 var o3 = { a:'a', b:'b' } 方法 ...

  7. Angular与PHP之间的不同的请求方式(post/get)导致的传参问题

    angularJS的$http发送POST请求,PHP无法接受数据的问题 使用jQuery进行ajax请求 $.ajax({ type: 'POST', url:'url.php', data: da ...

  8. jQ返回定位插件

    一.jQuery 提供开发者开发插件的几种模式 1.$.extend();     //这个方法是绑定在$上面的.可以通过$直接调用 2.$.fn.方法名     //这个方法是绑定在Dom对象上面的 ...

  9. 【硬件】- 英特尔CPU命名规则

    前言 一款Intel CPU的命名,一般由5个部分组成:品牌,品牌标识符,Gen标识,SKU数值,产品线后缀. 以下图为例: 品牌 英特尔旗下处理器有许多子品牌,包括我们熟悉的凌动(ATOM).赛扬( ...

  10. how to insert js to iframe page in order to disabled open new page/window

    how to insert js to iframe page in order to disabled open new page/window js 禁用 iframe 中的页面打开新页面 htt ...