开发环境和生产环境的配置和打包方式有所不同，下面是基于vue3+vite+ts项目的开发环境和生产环境配置及打包方式的详细说明。
- 开发环境配置
开发环境的配置主要是为了方便开发者进行调试和测试，以下是开发环境的配置步骤：
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.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.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
这样就可以区分不同环境进行打包了。
