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

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

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

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"

私有云混合云买个域名就可以用 cdn 静态资源 cdn静态资源静态资源cdn

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

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

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

...官方文档已经写得很详细了。这次更新基本上就是基于 webpack-chain 把之前的 webpack 配置迁移了一遍，因为vue-cli帮你做了很多默认配置，所有可以省去一些代码。当然这种out-of-the-box的工具利弊也很明显，它能快速上手，大部分简...

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

...官方文档已经写得很详细了。这次更新基本上就是基于 webpack-chain 把之前的 webpack 配置迁移了一遍，因为vue-cli帮你做了很多默认配置，所有可以省去一些代码。当然这种out-of-the-box的工具利弊也很明显，它能快速上手，大部分简...

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

...后，决定采用Vue来作为前端部分的技术架构。前端架构webpack配置Vue是一个非常优秀的前端MVVM框架，轻量、快速、文档友好又详细，代码组织也非常优雅，是我比较偏爱的MVVM架构。Vue官方提供了非常方便快速上手的脚手架Vue-cli...

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

...本就可以启动本地开发服务和打包线上资源，初次尝试了webpack这个打包工具，好像对其他问题不需要做过多的考虑，直接开始业务开发，其他的事情cli都帮助处理好了。vue init webpack helloWorld， cd helloWorld && cnpm install && npm run dev...

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

前言作者去年就开始使用webpack, 最早的接触就来自于vue-cli。那个时候工作重点主要也是 vue 的使用，对webpack的配置是知之甚少，期间有问题也是询问大牛 @吕大豹。顺便说一句，对于前端知识体系迷茫的童鞋可以关注豹哥的...

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