资讯专栏INFORMATION COLUMN

接口环境很多?静态资源要放cdn?不用修改代码,用webpack就可以(vue)

SoapEye / 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.jsbuild/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"

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

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

相关文章

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

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

    MonoLog 评论0 收藏0
  • 手摸手,带你vue撸后台 系列五(v4.0新版本)

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

    graf 评论0 收藏0
  • 开发富文本编辑器的一些经验教训

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

    mtunique 评论0 收藏0
  • webpack4.x升级摘要

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

    levinit 评论0 收藏0
  • webpack开发与生产环境配置

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

    afishhhhh 评论0 收藏0

发表评论

0条评论

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