Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
1.8k views
in Technique[技术] by (71.8m points)

webpack3+vue2.5怎么把host写到window里

需求是希望打包后能打出一个config.js文件,里面有host,可以随便修改

开发的时候有多个环境的配置文件
// dev.js
window.api = 'https://www.baidu.com/api/dev'

// test.js
window.api = 'https://www.baidu.com/api/test'

// prod
window.api = 'https://www.baidu.com/api/prod'

最后根据命令打包对应的环境
打包后类似这样 npm run build-prod

dist/
    -qita
    -index.html
    -config.js

// config.js
window.api = 'https://www.baidu.com/api/prod'

现在的是这样的

webpack-dev-server --inline --progress --config build/webpack.dev.conf.js -d=develop

因为webpack属于node环境,没有window,我应该怎么做?

不是开发或者打包的时候区分测试生产环境,而是在打包后方便修改。

部署人员部署不同服务器的时候需要修改包里的host地址,现在只能在dist包里全局搜索替换host,如12.12.12.12,这样比较麻烦,希望能在dist目录下能有一个配置文件,直接修改


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

新回答:

|- index.html
|- public(static) // 反正就是原封不动挪到dist
  |- config.js 
// index.html
<script src="./public/config.js"></script>

用环境变量呀
npm run build-test
npm run build-dev
npm run build-prod

环境变量的本质是通过命令,来区分不同的环境
开发是 npm run dev启动dev环境
打包时 npm run build-dev打包dev环境

具体通过代码实现是有非常多方式的
常用的 cross-env
cross-env RUN_ENV=production
在代码中

if(RUN_ENV === 'production') {}
else if(RUN_ENV === 'develop'){}
else if(RUN_ENV === 'testing'){}

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...