search

kenberkeley / vue-demo

Vue.js 示例项目 · 简易留言板。本项目拥有完善的文档说明与注释，让您快速上手 Vue.js 开发 SPA。Webpack / ES6 + Babel / Vue Router / (Vue Resource?) / (Vue Validator?) / (Vuex?) —— An Excellent Vue Starter with Best Practice / 最佳实践
https://kenberkeley.github.io/vue-demo/dist
Apache License 2.0
1.29k stars 410 forks source link

我想请问下webpack如何打包不同环境的配置? #28

Closed AlphaDu closed 7 years ago

AlphaDu commented 7 years ago

比如我连接后台的rest API，sit和uat到上线都对应不同后台的ip地址。webpack应该怎样配置不同环境的变量呢？

kenberkeley commented 7 years ago

参考 https://github.com/kenberkeley/vue-demo/blob/master/build/config/ENV.js

kenberkeley commented 7 years ago

还有： https://github.com/kenberkeley/vue-demo/blob/master/package.json#L7-L8

AlphaDu commented 7 years ago

好神速的回复，谢谢~~

kenberkeley commented 7 years ago

这个问题其实我在项目中也遇到过 最好的方式其实并不是根据环境变量 而是直接在 src/index.html 中定义一些全局的变量 这样的话 build 出来就是一份通用，而不是多份适配

kenberkeley commented 7 years ago

您可以在 https://github.com/kenberkeley/vue-demo/blob/master/build/prod.js 做这些工作

AlphaDu commented 7 years ago

十分感谢 ! 定义在index.html中这个思路我没想过。我会尝试下的

kenberkeley commented 7 years ago 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title></title>
  <link rel="shortcut icon" href="static/images/favicon.ico">
  <link href="static/bootstrap/css/bootstrap.min.css" rel="stylesheet">
  <link href="static/font-awesome/css/font-awesome.min.css" rel="stylesheet">

<link href="css/vendor.8696ae.css" rel="stylesheet"><link href="css/app.66faf8.css" rel="stylesheet"></head>
<body>

  <div id="app"></div>

<script>
window.API_URL = '//xxx.yyy.com' // 相当简单
</script>

<script src="static/jquery.min.js"></script>
<script src="static/bootstrap/js/bootstrap.min.js"></script>
<script src="static/bundle/plugins-4e191ebbed.js"></script>

<script type="text/javascript" src="js/manifest.03e10d.js"></script><script type="text/javascript" src="js/vendor.752883.js"></script><script type="text/javascript" src="js/app.3c121e.js"></script></body>
</html>
kenberkeley commented 7 years ago

因为之前我也因为这个问题而 build 出了 dist-test/ 以及 dist-prod/ 实际上唯一的区别只是后端的 API 地址 但就导致 manifest.js 以及 app.js 的哈希变动，非常冗余

kenberkeley commented 7 years ago

哦哦哦！！！还有更加方便的方式！！！利用 html-webpack-plugin！！！ 请参考 https://stackoverflow.com/a/43020506/5172890

AlphaDu commented 7 years ago

66666，太谢谢了！！！