在Vue中创建生产和开发环境

最新推荐文章于 2024-08-13 15:00:03 发布

一只欢喜

最新推荐文章于 2024-08-13 15:00:03 发布

阅读量695

点赞数 2

分类专栏： Vue项目知识及问题集合文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/qq_44866810/article/details/137105990

版权

Vue项目知识及问题集合专栏收录该内容

22 篇文章 0 订阅

订阅专栏

本文详细介绍了如何在VueCLI项目中通过环境变量和Webpack模式管理生产和开发环境配置，包括创建.env文件、配置vue.config.js、使用process.env访问环境变量以及通过cross-env在不同环境执行npm命令。

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

官方文档参考：模式和环境变量 | Vue CLI

在Vue中创建生产和开发环境配置，通常是通过环境变量和Webpack的模式来区分。

1.在项目根目录下创建.env文件，用于通用配置。

# .env
VUE_APP_API_URL=https://api.example.com

2.创建一个.env.development文件，用于开发环境配置。

# .env.development
NODE_ENV=development
VUE_APP_DEBUG=true

3.创建一个.env.production文件，用于生产环境配置。

# .env.production
NODE_ENV=production
VUE_APP_DEBUG=false

4.在vue.config.js中配置不同环境下的Webpack行为。

const isProduction = process.env.NODE_ENV === 'production';
 
module.exports = {
  // 基础配置...
  configureWebpack: {
    // 生产环境的配置
    production: {
      plugins: [
        // 生产环境的插件...
      ],
      optimization: {
        // 生产环境的优化配置...
      }
    },
    // 开发环境的配置
    development: {
      plugins: [
        // 开发环境的插件...
      ],
      devtool: 'eval-source-map',
      // 其他开发环境配置...
    },
    // 共享的配置...
  }
};

5.在代码中使用环境变量。

// 使用环境变量
const apiUrl = process.env.VUE_APP_API_URL;
 
// 根据不同环境进行不同操作
if (process.env.VUE_APP_DEBUG) {
  console.log('Debug mode is on');
}

6.确保在运行项目时指定正确的模式，例如使用npm run serve默认是开发环境，使用npm run build默认是生产环境。如果需要在不同环境下运行，可以使用cross-env来设置环境变量

// package.json
{
  "scripts": {
    "serve": "cross-env NODE_ENV=development vue-cli-service serve",
    "build": "cross-env NODE_ENV=production vue-cli-service build"
  }
}