怎么确认webpack根据不同命令打包之后环境变了？（Vue）npm run build:test

根据我的另外一篇文章，我们知道了怎么用webpack根据不同命令打包。

Webpack Vue-cli 2 根据不同命令打包_普普通通学习不内卷的博客-CSDN博客

有时候会有根据不同环境（测试环境，正式环境，生产环境）打包的需求，需要替换所有项目中遇到的地址，那么怎么确认我们确实使用webpack改变的环境呢？

方法：

找个页面，可以是App.vue, data里面加个code: process.env.BASE_API, 然后再在template里面{{code}}

<template>
  <div id="app">
    {{ code }}
    <img src="./assets/logo.png" />
    <router-view />
  </div>
</template>

<script>
export default {
  name: 'App',
  data () {
    return {
      code: process.env.NODE_ENV + ' ' + process.env.BASE_API
    }
  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

使用npm run build:test, 在打包后的文件里面搜索，看看是不是test设定的地址

再使用npm run build:prod, 在打包后的文件里面搜索，看看是不是对应的地址

有一点要注意的是，有小伙伴可能会发现，无论怎么跑npm run build:test，运行的时候都会发现页面这里是development 正式环境地址，那是因为npm run start的时候，默认运行的是dev环境哦，所以这里推荐是在打包之后确认。

还有一点就是VScode默认不会去搜索dist的，dist就是我们打包之后对应文件储存的地方，默认的，所以我这里是用HBuilder进行查询的。