资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

立即前往
首页/文章专栏/vue多环境配置方案

vue多环境配置方案

刘德刚 / 1236人阅读

摘要：前言一般服务器分为本地环境，测试环境，正式环境如果每次都要修改配置就很麻烦，总结一下我使用的方法修改执行命令修改文件的，在打包的时候执行不同的命令，测试执行那正式执行这里用到了能跨平台地设置及使用环境变量，使用

前言

一般服务器分为本地环境，测试环境，正式环境
如果每次都要修改配置就很麻烦，总结一下我使用的方法

</>复制代码 
  1. vue-demo/
  2.   |-build/
  3.   |-config/
  4.   |-dist/
  5.   |-src/
  6.      |-config/
  7.          |-index.js
  8.          |-dev.conf.js
  9.          |-sit.conf.js
  10.          |-prod.conf.js
  11.   |-package.json
  12.   |-index.html
修改执行命令

修改package.json文件的scripts，在打包的时候执行不同的命令，
测试执行那npm run build:sit
正式执行npm run build:prod
这里用到了cross-env能跨平台地设置及使用环境变量，使用

</>复制代码 
  1. npm install cross-env --save 
</>复制代码 
  1. "scripts": {
  2.     "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
  3.     "start": "npm run dev",
  4.     "build": "node build/build.js",
  5.     "build:prod": "cross-env NODE_ENV=production env_config=prod node build/build.js",
  6.     "build:sit": "cross-env NODE_ENV=production env_config=sit node build/build.js"
  7.   },
修改配置文件

修改vue项目下config文件夹里的dev.env.js和prod.env.js，添加sit.env.js文件，分别对应本地，正式和测试的配置文件
这里需要强调一下，如果这几个文件修改了一定要重新npm run dev一下

dev.env.js

</>复制代码 
  1. "use strict"
  2. module.exports = {
  3.   NODE_ENV: ""development"",
  4.   ENV_CONFIG: ""dev""
  5. }

prod.env.js

</>复制代码 
  1. "use strict"
  2. module.exports = {
  3.   NODE_ENV: ""production"",
  4.   ENV_CONFIG: ""prod""
  5. }

sit.env.js

</>复制代码 
  1. "use strict"
  2. module.exports = {
  3.   NODE_ENV: ""production"",
  4.   ENV_CONFIG: ""sit""
  5. }

修改build下的webpack.prod.conf.js文件找到const env = require("../config/prod.env")
修改成const env = require("../config/" + process.env.env_config + ".env")

vue默认是两个配置，一个是dev,一个prod,修改webpack.prod.conf.js后就可以判断是测试环境还是正式环境了

</>复制代码 
  1. // const env = require("../config/prod.env")
  2. const env = require("../config/" + process.env.env_config + ".env")
应用

在src文件夹里新建config文件夹，里面新建index.js

index.js

</>复制代码 
  1. "use strict"
  2. // 根据环境引入不同配置 process.env.ENV_CONFIG  ex:dev.conf.js
  3. const config = require("./" + process.env.ENV_CONFIG + ".conf")
  4. module.exports = config

dev.conf.js，sit.conf.js，prod.conf.js三个文件夹里写不同的配置

</>复制代码 
  1. // 配置本地测试
  2. module.exports = {
  3.         /*     
  4.         * action 七牛上传地址
  5.         * bucket 空间名
  6.         * domain 回显域名
  7.         */
  8.   qiniu: {
  9.     action: "https://up.qiniup.com",
  10.     bucket: "xxx",
  11.     domain: "xxx"
  12.   },
  13.   // 接口地址配置
  14.   baseURL: "https://localhost/api/v1"
  15. }

最后
直接使用就可以了

</>复制代码 
  1. import { qiniu } from "@/config/index.js"
  2. console.log(qiniu.action)

稍后会将demo上传到github上

关于我

您可以扫描添加下方的微信并备注 Sol 加交流群，给我提意见，交流学习。

如果对你有帮助送我一颗小星星（づ￣3￣）づ╭❤～

转载请联系作者！

GPU云服务器 云服务器 vue.js多页面 多租户环境 多线程环境 测试环境方案

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/110221.html

相关文章

  • vue多环境配置方案

    摘要：前端项目上线的时候不可避免的会考虑到不同的运行环境需要前端请求不同服务地址的问题方案一一般的情况下可以使用环境变量进行分环境打包开发环境继续使用代理需要编译的环境通过设置环境变量去控制打包过程最终生成适用于不同环境的前端资源有关环境 前端项目上线的时候 , 不可避免的会考虑到不同的运行环境需要前端请求不同服务地址的问题 方案一 : 一般的情况下 , 可以使用vue-cli-servi...

    zhouzhou 评论0 收藏0

  • vuecli3 vant rem 移动端框架方案

    摘要：描述基于适配方案封装，构建手机端模板脚手架帮你做好的配置有多环境开发封装适配方案生产环境优化首屏加速低版本浏览器兼容环境发布脚本可以上手直接写代码多环境开发之前写过一个多环境的方案，是基于的多环境配置方案传送门最近新的项目采用了开始了 描述 基于vue-cli3.0+webpack 4+vant ui + sass+ rem适配方案+axios封装，构建手机端模板脚手架 帮你做好的配置...

    since1986 评论0 收藏0

  • 关于Vue2一些值得推荐的文章 -- 五、六月份

    摘要：五六月份推荐集合查看最新的请点击集前端最近很火的框架资源定时更新，欢迎一下。苏幕遮燎沈香宋周邦彦燎沈香，消溽暑。鸟雀呼晴，侵晓窥檐语。叶上初阳乾宿雨，水面清圆，一一风荷举。家住吴门，久作长安旅。五月渔郎相忆否。小楫轻舟，梦入芙蓉浦。 五、六月份推荐集合 查看github最新的Vue weekly；请::点击::集web前端最近很火的vue2框架资源；定时更新，欢迎 Star 一下。 苏...

    sutaking 评论0 收藏0

  • 关于Vue2一些值得推荐的文章 -- 五、六月份

    摘要：五六月份推荐集合查看最新的请点击集前端最近很火的框架资源定时更新，欢迎一下。苏幕遮燎沈香宋周邦彦燎沈香，消溽暑。鸟雀呼晴，侵晓窥檐语。叶上初阳乾宿雨，水面清圆，一一风荷举。家住吴门，久作长安旅。五月渔郎相忆否。小楫轻舟，梦入芙蓉浦。 五、六月份推荐集合 查看github最新的Vue weekly；请::点击::集web前端最近很火的vue2框架资源；定时更新，欢迎 Star 一下。 苏...

    khs1994 评论0 收藏0

发表评论

登陆后可评论

0条评论

刘德刚

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<