Vue中配置本地、线上环境自动切换

最新推荐文章于 2024-09-30 15:56:41 发布

全靠一口仙气吊着i

最新推荐文章于 2024-09-30 15:56:41 发布

阅读量4.8k

点赞数 1

本文链接：https://blog.csdn.net/dd602350527/article/details/106894797

版权

本文介绍了如何在Vue项目中配置本地和线上环境的自动切换。首先，通过安装cross-env设置跨平台环境变量，接着在package.json中添加环境脚本。然后，在根目录创建vue.config.js文件进行配置，并在src/build目录下创建dev.js和prod.js用于不同环境的配置。最后，在封装的axios中根据命令自动选择环境。通过npm run serve启动本地环境，npm run build打包并使用hs命令启动服务器进行线上测试。

摘要由CSDN通过智能技术生成

1、安装cross-env包实现跨平台环境变量配置

命令： npm install cross-env -D

2、在package.json中添加cross-env运行环境脚本


  "scripts": { 
    "serve": "cross-env BUILD_ENV=dev vue-cli-service serve", // 这是开发环境
    "build": "cross-env BUILD_ENV=prod vue-cli-service build", //  这是线上环境
    "可能还会有其它环境...": "cross-env BUILD_ENV=prod vue-cli-service ...", // 。。。。
    "lint": "vue-cli-service lint"
  }

3、在跟目录下创建vue.config.js文件进行配置：


module.exports = {
  // 开启代码的严格校验模式
  lintOnSave: true,
  devServer: {
    // 可设置自定义端口号
    // prot:9999
  },
  // 指定资源路径
  //publicPath: 'http://www.baidu.com/app',
  chainWebpack: config => {
    console.log(config.plugin('define'))
    config.plugin('define').tap(args => {