小白如何配置vue-cli项目分环境打包

774 阅读2分钟

主要作用:

  1. 分环境打包的主要作用最重要的是在不同环境下打包配置的不同

  2. 通常有两个或者以上域名对应不同服务器,利用环境变量动态配置域名

  3. 其他需要判断环境更换的链接,图片,地址等

  4. Vue-cli已经帮我们做了99%的配置,我们小菜只需要使用即可


  • 1.项目根目录配置.env文件 pre和test分别代表两个测试环境,开发环境development和正式环境production已经默认存在

微信图片_20210607151931.png

  • 2.配置环境变量 键值对的格式,键是固定的

vue-cli原话:

请注意,只有 NODE_ENV,BASE_URL 和以 VUE_APP_ 开头的变量将通过 webpack.DefinePlugin 静态地嵌入到客户端侧的代码中。这是为了避免意外公开机器上可能具有相同名称的私钥。

咱小白也不懂啥意思,反正照他的来呗,这里我只用了一个 .env.pre文件同理

微信图片_20210607153131.png

  • 3. 配置package.json --mode 选项参数为命令行覆写默认的模式,就是要打包的模式,要和上面的环境文件对应

微信图片_20210607154326.png

  • 4.可以在根目录创建vue.config.js设置自己想要的配置

微信图片_20210607160709.png


我们可以在app.vue里面打印一下当前环境, 打包命令 npm run dev

created() {
   console.log('当前环境',process.env.NODE_ENV)  // 当前环境 development
 }

打包命令: npm run test

created() {
  console.log('当前环境',process.env.NODE_ENV)  // 当前环境 test
}
  • 没有服务器, 在本地怎么模拟测试环境运行效果 --- 安装live-serve插件
npm i live-server -S

在项目中找到package.json 文件,修改 scripts

微信图片_20210607162314.png

打包后在生成的dist目录下面运行 live-server命令即可

微信图片_20210607162727.png


  • 5.配置动态域名 创建文件

微信图片_20210607163652.png

判断域名并导出 baseURLs.js

微信图片_20210607164259.png

配置axios axios-config.js

微信图片_20210607164654.png

现在发送请求就可以根据环境动态切换域名了 再把路由封装一下, axios封装配置一下,基本上项目就可以跑进来啦!