vue3+vite+ts项目配置开发环境和生产环境 打包命令配置

开发环境和生产环境的配置和打包方式有所不同，下面是基于vue3+vite+ts项目的开发环境和生产环境配置及打包方式的详细说明。

1. 开发环境配置

开发环境的配置主要是为了方便开发者进行调试和测试，以下是开发环境的配置步骤：

1.1 安装依赖

首先需要安装依赖，可以使用npm或yarn安装，具体命令如下：

npm install 或 yarn

1.2 配置vite.config.ts

在项目根目录下创建vite.config.ts文件，并配置如下内容：

import {
    
     defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import path from 'path';

export default defineConfig({
    
    
  plugins: [vue()],
  resolve: {
    
    
    alias: {
    
    
      '@': path.resolve(__dirname, './src'),
    },
  },
  server: {
    
    
    proxy: {
    
    
      '/api': {
    
    
        target: 'http://localhost:3000',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, ''),
      },
    },
  },
});

1.3 配置.env.development

在项目根目录下创建.env.development文件，并配置如下内容：

VITE_APP_BASE_API=http://localhost:3000/api

这里配置了接口的基础地址，方便开发时调用接口。

1.4 配置tsconfig.json

在项目根目录下创建tsconfig.json文件，并配置如下内容：

{
    
    
  "compilerOptions": {
    
    
    "target": "esnext",
    "module": "esnext",
    "moduleResolution": "node",
    "esModuleInterop": true,
    "sourceMap": true,
    "strict": true,
    "jsx": "preserve",
    "allowSyntheticDefaultImports": true,
    "resolveJsonModule": true,
    "baseUrl": ".",
    "paths": {
    
    
      "@/*": ["src/*"]
    }
  },
  "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue", "tests/**/*.ts", "tests/**/*.tsx"],
  "exclude": ["node_modules"]
}

1.5 启动项目

启动项目的命令如下：

npm run dev 或 yarn dev

2. 生产环境配置

生产环境的配置主要是为了优化项目性能和减小打包体积，以下是生产环境的配置步骤：

2.1 配置vite.config.ts

在vite.config.ts中添加如下配置：

export default defineConfig({
    
    
  plugins: [vue()],
  build: {
    
    
    outDir: 'dist',
    assetsDir: 'assets',
    sourcemap: false,
    terserOptions: {
    
    
      compress: {
    
    
        drop_console: true,
        drop_debugger: true,
      },
    },
  },
});

这里配置了打包输出目录、静态资源目录、是否生成sourcemap以及代码压缩选项。

2.2 配置.env.production

在项目根目录下创建.env.production文件，并配置如下内容：

VITE_APP_BASE_API=https://api.example.com

这里配置了生产环境下接口的基础地址。

2.3 打包项目

打包项目的命令如下：

npm run build 或 yarn build

打包完成后会在项目根目录下生成dist目录，里面包含了打包后的静态文件和index.html文件，可以直接部署到服务器上。

3. 区分不同环境打包

在开发环境和生产环境下，我们需要区分不同的打包方式，以下是打包命令的区分方式：

3.1 配置package.json

在package.json中添加如下scripts：

{
    
    
  "scripts": {
    
    
    "dev": "vite",
    "build:dev": "vite build",
    "build:prod": "cross-env NODE_ENV=production vite build"
  }
}

这里配置了三个命令，分别是开发环境启动命令、开发环境打包命令和生产环境打包命令。

3.2 打包项目

在开发环境下执行以下命令即可：

npm run dev

在生产环境下执行以下命令即可：

npm run build:prod

这样就可以区分不同环境进行打包了。