前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Vue 2.0 添加多环境打包配置二(vue init webpack创建的项目,有build,co

Vue 2.0 添加多环境打包配置二(vue init webpack创建的项目,有build,co

作者头像
用户6256742
发布2024-06-20 13:46:06
1000
发布2024-06-20 13:46:06
举报
文章被收录于专栏:网络日志网络日志

Webpack代理+多环境打包配置(开发,测试,预生产,生产)

一:配置proxy代理

config/index.js

代码语言:javascript
复制
module.exports = {
  dev: {
    assetsSubDirectory: "static",
    assetsPublicPath: "/",
    proxyTable: {
      "/web": {
        // target: "http://192.168.2.666/", // 接口域名,
        target: "http://192.168.2.777:81/", // 接口域名,
        // target: "http://uat.baiddu.com/api/", // 预生产域名,
        // target: "https://api.baidu.com/", // 接口域名,
        changeOrigin: true, //是否跨域
        // logLevel:'debug',
        pathRewrite: {
          "^/web": "/web" //需要rewrite重写的,
        }
      }
   
    },
    
  }
}
二:通过corss-env,修改相关配置,build不同环境代码
1.安装
代码语言:javascript
复制
 npm install cross-env -dev--save
2.修改各环境下的参数,在 config 目录下添加 test.env.js, uat.env.js并修改dev.env.js, prod.env.js,修改后内容如下(必须VUE_APP_开头)

test.env.js

代码语言:javascript
复制
'use strict'
module.exports = {
  NODE_ENV: '"testing"',
  env_config:'"test"',
  VUE_APP_BASE_API:'"http://192.168.2.777:81/web"'
}

dev.env.js

代码语言:javascript
复制
'use strict'
const merge = require('webpack-merge')
const prodEnv = require('./prod.env')

module.exports = merge(prodEnv, {
  NODE_ENV: '"development"',
  env_config:'"dev"',
  VUE_APP_BASE_API:'"/web"'
 
})

uat.env.js

代码语言:javascript
复制
'use strict'
module.exports = {
  NODE_ENV: '"usertest"',
  env_config:'"uat"',
  VUE_APP_BASE_API:'"http://uat.baidu.com/web"'
}

prod.env.js

代码语言:javascript
复制
'use strict'
module.exports = {
  NODE_ENV: '"production"',
  env_config:'"prod"',
  VUE_APP_BASE_API:'"https://api.bitdu.com/web"'
}
3.修改 package.json 文件中的 scripts 内容.(NODE_ENV最好都设成 production,因为在 build/utils.js 只做了production 一种判定)
代码语言:javascript
复制
 "scripts": {
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "start": "npm run dev",
    "lint": "eslint --ext .js,.vue src",
    "build-test": "cross-env NODE_ENV=production env_config=test node build/build.js",
    "build-uat": "cross-env NODE_ENV=production env_config=uat node build/build.js",
    "build-prod": "cross-env NODE_ENV=production env_config=prod node build/build.js"
  },
4.修改 config/index.js 文件中 build 参数,这里的参数会在 build/webpackage.prod.conf.js 中使用到
代码语言:javascript
复制
build: {
    // Template for index.html
    // 添加test  prod 环境的配制
    testEnv: require('./test.env'),
    uatEnv: require('./uat.env'),
    prodEnv: require('./prod.env'),   
}
5.对 build/webpackage.prod.conf.js 文件进行修改,调整 env 常量的生成方式。
代码语言:javascript
复制
// 个性env常量的定义
// const env = require('../config/prod.env')
const env = config.build[process.env.env_config+'Env']
6.修改 build/build.js 文件,删除 process.env.NODE_ENV 的赋值,修改 spinner 的定义,调整后的内容如下:
代码语言:javascript
复制
'use strict'
require('./check-versions')()
// 注释掉的代码
// process.env.NODE_ENV = 'production'
const ora = require('ora')
const rm = require('rimraf')
const path = require('path')
const chalk = require('chalk')
const webpack = require('webpack')
const config = require('../config')
const webpackConfig = require('./webpack.prod.conf')
// 修改spinner的定义
// const spinner = ora('building for production...')
var spinner = ora('building for ' + process.env.NODE_ENV + ' of ' + process.env.env_config+ ' mode...' )
spinner.start()
7.在网络请求处,设置baseUrl
代码语言:javascript
复制
// 设置baseURL
axios.defaults.baseURL = process.env.VUE_APP_BASE_API
8.执行打包
代码语言:javascript
复制
npm run build-test
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2022-09-17 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • Webpack代理+多环境打包配置(开发,测试,预生产,生产)
    • 一:配置proxy代理
      • 二:通过corss-env,修改相关配置,build不同环境代码
        • 1.安装
        • 2.修改各环境下的参数,在 config 目录下添加 test.env.js, uat.env.js并修改dev.env.js, prod.env.js,修改后内容如下(必须VUE_APP_开头)
        • 3.修改 package.json 文件中的 scripts 内容.(NODE_ENV最好都设成 production,因为在 build/utils.js 只做了production 一种判定)
        • 4.修改 config/index.js 文件中 build 参数,这里的参数会在 build/webpackage.prod.conf.js 中使用到
        • 5.对 build/webpackage.prod.conf.js 文件进行修改,调整 env 常量的生成方式。
        • 6.修改 build/build.js 文件,删除 process.env.NODE_ENV 的赋值,修改 spinner 的定义,调整后的内容如下:
        • 7.在网络请求处,设置baseUrl
        • 8.执行打包
    领券
    问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档