接口环境很多？静态资源要放cdn？不用修改代码，用webpack就可以（vue）

SoapEye 发布于2019-08-20 18:04 / 2968人阅读

摘要：传送门针对解决的问题接口环境很多，有测试服，有，有正式等等，每次都要修改代码静态资源可能要存到中，这也要修改代码吗修改配置文件只需要修改环境列表，第一个环境为默认环境指明现在使用的环境打包的路径，只在的时候有用这个环境下面的请求的域

multi-hostname-vue-cli

github传送门

针对解决的问题

接口环境很多，有测试服，有qa，有正式等等，每次都要修改代码？no!

静态资源可能要存到cdn中，这也要修改代码吗？no!

Start up clone && npm install 修改配置文件 /config/host-config.js,只需要修改 ENV_LIST

/*
* 环境列表，第一个环境为默认环境
* envName: 指明现在使用的环境
* dirName: 打包的路径，只在build的时候有用
* apiHostname: 这个环境下面的api 请求的域名
* assetHostname: 静态资源存放的域名,未指定（undefined）则为相对路径
* */
const ENV_LIST = [
  {
    envName: "test",
    dirName: "test",
    apiHostname: "http://test_apiHostname",
    assetHostname: "http://localhost:3004"
  },
  {
    envName: "pro",
    dirName: "pro",
    apiHostname: "http://product_apiHostname",
    assetHostname:"http://product_assetHostname"
  },
  {
    envName: "qa",
    dirName: "qa",
    apiHostname: "http://product_apiHostname",
    assetHostname:"http://product_assetHostname"
  }
]

在文件中使用hostname

const HOST_NAME = process.env.HOST_NAME
export {HOST_NAME}

dev 开发调试

npm run dev [envName]

envName 为上面配置的envName，对应的process.env.HOST_NAME的值就是对应的ENV_LIST中的hostname

不指定envName默认选择ENV_LIST的第一个值

envName 不在ENV_LIST 中的时候默认选择 ENV_LIST的第一个值

# 例子：
# 在qa的环境中调试，process.env.HOST_NAME === "http://qa_hostname"
npm run dev qa

build 打包

npm run build [envName] //打指定环境的包

npm run build-all // 全部重新打包

打包的envName与 dev类似

执行打包命令会在dist文件夹中生成对应的路径

html和css中使用过的静态资源的引用路径会指定到设定的域名中

dist
    |-test
    |-qa
    |-pro

对比vue-cli生成的环境修改的地方 新增 /config/host-conf.js

host-conf.js

修改 /config/index.js

修改build的路径

修改build的静态资源的路径

修改 `/build/webpack.base.conf.js

添加用户客户端的环境变量

// 通过webpack传入客户端中
  plugins: [
    new webpack.DefinePlugin({
      "process.env.HOST_NAME": """ + process.env.HOST_NAME + """
    })
  ]

入口build/build.js和build/dev-server.js设置环境变量

// 设置域名的环境变量
process.env.HOST_ENV = process.argv[2]

新增 build/build-all.js

host-conf.js

修改package.json的script, 增加Build-all

"build-all": "node build/build-all.js"

GPU云服务器云服务器买个域名就可以用 cdn 静态资源 cdn静态资源静态资源cdn

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

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

手摸手，带你用vue撸后台系列五(v4.0新版本)

摘要：同时增加了单元测试，使用了，增加了可视化配置权限，增加了自定义布局等等，优化了原先的权限方案，支持不刷新页面更新路由等等功能。虽然它的初衷是为了单元测试的，但正好满足了我们的需求。它会重写浏览器的对象，从而才能拦截所有请求，代理到本地。前言 vue-element-admin 从 2017.04.17提交第一个 commit 以来，维护至今已经有两年多的时间了了，发布了四十多个版本，...

MonoLog 2019-08-26 13:43 评论0 收藏0
手摸手，带你用vue撸后台系列五(v4.0新版本)

摘要：同时增加了单元测试，使用了，增加了可视化配置权限，增加了自定义布局等等，优化了原先的权限方案，支持不刷新页面更新路由等等功能。虽然它的初衷是为了单元测试的，但正好满足了我们的需求。它会重写浏览器的对象，从而才能拦截所有请求，代理到本地。前言 vue-element-admin 从 2017.04.17提交第一个 commit 以来，维护至今已经有两年多的时间了了，发布了四十多个版本，收获了三...

graf 2019-05-21 19:33 评论0 收藏0
开发富文本编辑器的一些经验教训

摘要：当然，这只是结合自己项目的工程结构和特点设置的一套使用方式，仅供参考开发富文本编辑器的教训由于项目的时间较紧张，我在页面上应用了框架的背景下，想当然的想要把也应用于富文本编辑器的开发，事实证明这是不太可行的。此文已由作者刘诗川授权网易云社区发布。欢迎访问网易云社区，了解更多网易技术产品运营经验。最近我们的产品有一个需求是要在PC端做一个面向用户的书评编辑器，让用户和编辑在蜗牛读书...

mtunique 2019-06-28 11:04 评论0 收藏0
webpack4.x升级摘要

摘要：以为例，编写来帮助我们完成重复的工作编译压缩我只要执行一下就可以检测到文件的变化，然后为你执行一系列的自动化操作，同样的操作也发生在这些的预处理器上。的使用是针对第三方类库使用各种模块化写法以及语法。 showImg(https://segmentfault.com/img/bVbtZYK); 一：前端工程化的发展很久以前，互联网行业有个职位叫做软件开发工程师在那个时代，大家可能...

levinit 2019-08-23 18:11 评论0 收藏0
webpack开发与生产环境配置

摘要：豹哥对于刚开始小白的自己虽然现在也白知无不谈，而且回复超快超认真。这里真的很感谢豹哥。是项目启动时的一些文件，如的配置文件开发环境服务配置文件一些简单工具函数等等。是关于整个项目的环境配置包括开发与生产。前言作者去年就开始使用webpack, 最早的接触就来自于vue-cli。那个时候工作重点主要也是 vue 的使用，对webpack的配置是知之甚少，期间有问题也是询问大牛 @吕大...

afishhhhh 2019-08-20 18:32 评论0 收藏0