摘要:传送门针对解决的问题接口环境很多,有测试服,有,有正式等等,每次都要修改代码静态资源可能要存到中,这也要修改代码吗修改配置文件只需要修改环境列表,第一个环境为默认环境指明现在使用的环境打包的路径,只在的时候有用这个环境下面的请求的域
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 qabuild 打包
npm run build [envName] //打指定环境的包
npm run build-all // 全部重新打包
打包的envName与 dev类似
执行打包命令会在dist文件夹中生成对应的路径
html和css中使用过的静态资源的引用路径会指定到设定的域名中
dist |-test |-qa |-pro对比vue-cli生成的环境修改的地方 新增 /config/host-conf.js
修改 /config/index.jshost-conf.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
修改package.json的script, 增加Build-allhost-conf.js
"build-all": "node build/build-all.js"
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/84053.html
...官方文档已经写得很详细了。这次更新基本上就是基于 webpack-chain 把之前的 webpack 配置迁移了一遍,因为vue-cli帮你做了很多默认配置,所有可以省去一些代码。当然这种out-of-the-box的工具利弊也很明显,它能快速上手,大部分简...
...官方文档已经写得很详细了。这次更新基本上就是基于 webpack-chain 把之前的 webpack 配置迁移了一遍,因为vue-cli帮你做了很多默认配置,所有可以省去一些代码。当然这种out-of-the-box的工具利弊也很明显,它能快速上手,大部分简...
...后,决定采用Vue来作为前端部分的技术架构。 前端架构webpack配置Vue是一个非常优秀的前端MVVM框架,轻量、快速、文档友好又详细,代码组织也非常优雅,是我比较偏爱的MVVM架构。Vue官方提供了非常方便快速上手的脚手架Vue-cli...
...本就可以启动本地开发服务和打包线上资源,初次尝试了webpack这个打包工具,好像对其他问题不需要做过多的考虑,直接开始业务开发,其他的事情cli都帮助处理好了。vue init webpack helloWorld, cd helloWorld && cnpm install && npm run dev...
前言 作者去年就开始使用webpack, 最早的接触就来自于vue-cli。那个时候工作重点主要也是 vue 的使用,对webpack的配置是知之甚少,期间有问题也是询问大牛 @吕大豹。顺便说一句,对于前端知识体系迷茫的童鞋可以关注豹哥的...
阅读 3144·2021-09-04 16:40
阅读 3342·2021-08-31 09:41
阅读 1239·2021-08-09 13:41
阅读 178·2019-08-30 15:54
阅读 2561·2019-08-30 11:22
阅读 1318·2019-08-30 10:52
阅读 691·2019-08-29 13:24
阅读 1189·2019-08-26 13:28