Vue CLI多环境配置项目实战教程

2024/9/27 0:03:15

本文主要是介绍Vue CLI多环境配置项目实战教程，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

概述

本文将详细介绍如何使用vue CLI多环境配置项目实战，从项目初始化到环境变量配置，再到多环境构建和部署，每一步都详细展开，帮助开发者轻松应对不同环境下的项目需求。

Vue CLI项目初始化

创建Vue项目

为了开始使用Vue CLI进行多环境配置，首先需要创建一个Vue项目。使用Vue CLI可以快速搭建一个Vue项目结构，以下为创建Vue项目的步骤：

确保已经安装了Node.js和npm，可以通过命令行检查版本来验证是否已安装：
```
node -v
npm -v
```
使用Vue CLI创建一个新项目：
```
vue create my-vue-app
```
选择预设模板或自定义配置。如果选择自定义配置，可以安装Vue CLI插件以支持环境变量配置。

配置.vueconfig.js文件

Vue CLI提供了一个可选的配置文件.vueconfig.js，用于定制项目构建选项。默认情况下，Vue CLI会生成一个.vueconfig.js文件，如果有额外的配置需求，可以在该文件中进行配置。

在项目根目录下打开.vueconfig.js文件，然后添加自定义配置。例如，配置单页面应用的入口文件、输出路径等：

module.exports = {
   assetsDir: 'static', // 静态资源路径
   outputDir: 'dist',   // 构建输出路径
   publicPath: '/',     // CDN路径
   configureWebpack: {
       resolve: {
           alias: {
               '@': './src'      // 别名配置
           }
       }
   },
   devServer: {
       port: 8080,      // 服务器端口
       host: '0.0.0.0'  // 服务器主机名
   },
   chainWebpack: config => {
       config.merge({
           webpack: require('./webpack.config')
       });
   }
};

环境变量配置

创建环境变量文件

为了能够在不同的环境中使用不同的配置（例如API地址、数据库连接字符串等），我们需要为每个环境创建一个环境变量文件。

在项目根目录下，创建一个.env文件，用于存储所有环境的公共配置：
```
VUE_APP_API_URL=http://localhost:3000
```
根据需要为不同的环境创建特定的环境变量文件，例如，开发环境.env.development和生产环境.env.production：
```
# .env.development
VUE_APP_API_URL=http://dev-api.example.com

# .env.production
VUE_APP_API_URL=http://prod-api.example.com
```

使用env变量在项目中

在项目中，可以通过process.env.VUE_APP_*获取这些环境变量。这些变量会被Vue CLI在构建时注入到JavaScript环境中。

在Vue组件中使用环境变量，例如：

export default {
   mounted() {
       console.log(process.env.VUE_APP_API_URL);
   }
}

为了方便在模板中使用，也可以通过计算属性或data属性将环境变量暴露给模板：

export default {
   computed: {
       apiUrl() {
           return process.env.VUE_APP_API_URL;
       }
   }
}

使用时，可以在模板中这样调用：

<template>
   <div>
       <p>{{ apiUrl }}</p>
   </div>
</template>

多环境构建配置

配置不同环境的打包设置

为了在不同的环境中进行打包，需要在.vueconfig.js中设置不同的打包配置文件。

在项目根目录下，创建一个webpack.config.js文件，用于配置打包设置。例如，配置不同环境下的输出目录：

module.exports = function (env, args) {
   const path = require('path');
   const TerserPlugin = require('terser-webpack-plugin');
   const MiniCssExtractPlugin = require('mini-css-extract-plugin');

   const outputPath = path.resolve(__dirname, 'dist', args.mode);

   return {
       mode: args.mode,
       output: {
           path: outputPath,
           filename: '[name].[contenthash].js',
           chunkFilename: '[name].[contenthash].js'
       },
       plugins: [
           new MiniCssExtractPlugin({
               filename: '[name].[contenthash].css',
               chunkFilename: '[name].[contenthash].css'
           })
       ],
       optimization: {
           minimizer: [
               new TerserPlugin({
                   cache: true,
                   parallel: true,
                   extractComments: false
               })
           ]
       }
   };
};

更新.vueconfig.js文件，引入自定义的webpack配置文件：

module.exports = {
   assetsDir: 'static', // 静态资源路径
   outputDir: 'dist',   // 构建输出路径
   publicPath: '/',     // CDN路径
   configureWebpack: {
       resolve: {
           alias: {
               '@': './src'      // 别名配置
           }
       }
   },
   devServer: {
       port: 8080,      // 服务器端口
       host: '0.0.0.0'  // 服务器主机名
   },
   chainWebpack: config => {
       config.merge({
           webpack: require('./webpack.config')
       });
   }
};

使用命令行参数指定环境

Vue CLI提供了构建时指定环境的功能，可以通过--mode参数来选择构建环境。

使用命令行构建项目时，指定环境：

vue-cli-service build --mode development
vue-cli-service build --mode production

在构建命令中，Vue CLI会自动读取并应用相应的环境变量配置文件。

路由和API请求的环境区分

根据环境加载不同路由路径

为了在不同的环境中使用不同的路由配置，可以在路由配置文件中根据环境变量进行条件判断。

在src/router/index.js中，使用process.env.VUE_APP_*来动态设置路由：

import Vue from 'vue';
import Router from 'vue-router';
import Home from '@/views/Home.vue';
import About from '@/views/About.vue';
import Admin from '@/views/Admin.vue';

Vue.use(Router);

const routes = [
   {
       path: '/',
       name: 'Home',
       component: Home
   },
   {
       path: '/about',
       name: 'About',
       component: About
   },
   process.env.NODE_ENV === 'production' ? {
       path: '/admin',
       name: 'Admin',
       component: Admin
   } : null
].filter(route => route);

export default new Router({
   mode: 'history',
   routes
});

动态设置API请求的基础路径

在进行API请求时，通常需要根据环境变量设置不同的基础路径。假设使用axios进行请求：

创建一个配置文件src/utils/request.js，用于设置基础路径：

import axios from 'axios';

export default axios.create({
   baseURL: process.env.VUE_APP_API_URL,
   headers: {
       'X-Requested-With': 'XMLHttpRequest'
   }
});

在需要进行API请求的组件或服务中，从配置文件中导入并使用请求方法：

import request from '@/utils/request';

export function fetchUser(id) {
   return request.get(`/users/${id}`);
}

测试多环境配置

手动切换环境测试

在开发过程中，使用不同的环境变量文件手动切换环境是非常常见的做法。

确保使用了正确的环境变量文件。例如，切换到开发环境时，确保使用了.env.development文件：
```
.env.development
```
启动开发服务器时，指定开发环境：
```
vue-cli-service serve --mode development
```

自动化测试环境配置

在持续集成或开发过程中，自动化测试能够确保环境配置的正确性和一致性。

使用Jest或其他测试框架对应用进行单元测试和集成测试。在测试配置文件中，可以设置不同的环境变量以模拟不同环境的行为。

示例测试配置：

// jest.config.js
module.exports = {
   setupFilesAfterEnv: ['<rootDir>/src/utils/setupTests.js'],
   moduleNameMapper: {
       '^@/(.*)$': '<rootDir>/src/$1'
   },
   testEnvironment: 'jsdom',
   transform: {
       '^.+\\.vue$': 'vue-jest',
       '^.+\\.js$': 'babel-jest'
   },
   testPathIgnorePatterns: ['/node_modules/'],
   coverageDirectory: 'coverage',
   clearMocks: true,
   transformIgnorePatterns: ['<rootDir>/node_modules/'],
   coveragePathIgnorePatterns: ['/node_modules/'],
   coverageThreshold: {
       global: {
           statements: 90,
           branches: 80,
           functions: 80,
           lines: 80
       }
   }
};

在src/utils/setupTests.js中，配置环境变量：

process.env.NODE_ENV = 'test';
process.env.VUE_APP_API_URL = 'http://test-api.example.com';

发布项目到不同环境

打包不同环境的代码

在发布项目时，需要分别打包不同的环境代码。

通过命令行构建不同环境的代码：

vue-cli-service build --mode development
vue-cli-service build --mode production

构建完成后，可以在dist目录下看到不同环境的输出文件。

部署到不同的服务器

在部署代码时，需要将打包好的代码上传到相应的服务器，并进行相应的配置和启动操作。

将打包后的代码上传到服务器，例如使用SCP或FTP工具：
```
scp -r dist/ user@server:/path/to/deploy
```
在服务器上配置环境变量，确保与项目配置匹配：
```
export VUE_APP_API_URL=http://prod-api.example.com
```
启动Nginx或其他Web服务器，使项目文件能够通过网络访问：
```
sudo systemctl start nginx
```

通过以上步骤，可以实现Vue项目在不同环境下的顺利构建和部署。同时，为项目添加环境变量配置文件、动态设置路由和API请求路径，可以确保项目在不同环境下能够顺利运行和调试。

这篇关于Vue CLI多环境配置项目实战教程的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！