当前位置:   article > 正文

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

vite打包配置

开发环境和生产环境的配置和打包方式有所不同,下面是基于vue3+vite+ts项目的开发环境和生产环境配置及打包方式的详细说明。
在这里插入图片描述

1. 开发环境配置

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

1.1 安装依赖

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

npm install 或 yarn add 
  • 1

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
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21

1.3 配置.env.development

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

VITE_APP_BASE_API=http://localhost:3000/api
  • 1

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

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
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19

1.5 启动项目

启动项目的命令如下:

npm run dev 或 yarn dev
  • 1

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,
      },
    },
  },
});
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14

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

2.2 配置.env.production

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

VITE_APP_BASE_API=https://api.example.com
  • 1

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

2.3 打包项目

打包项目的命令如下:

npm run build 或 yarn build
  • 1

打包完成后会在项目根目录下生成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"
  }
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7

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

3.2 打包项目

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

npm run dev
  • 1

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

npm run build:prod
  • 1

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

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/从前慢现在也慢/article/detail/392898
推荐阅读
相关标签
  

闽ICP备14008679号