读取.env变量

在vue项目中，读取.env变量，可以使用process.env来读取。

一、 安装环境

依赖dotenv库，安装：

npm install dotenv --save-dev

二、 配置.env文件

在项目根目录下，创建.env文件，在文件中配置变量：

PORT=8080

三、 vite.config.js中配置运行端口

在vue项目中，vite.config.js中配置运行端口：

import { defineConfig } from 'vite';
import dotenv from 'dotenv';

dotenv.config();
const PORT = process.env.PORT || 8888;
console.log(`当前端口: ${PORT}`);

export default defineConfig({
  server: {
    port: PORT,
  },
});

四、 创建运行脚本

在项目根目录下，创建运行脚本run_web.sh：

#!/bin/bash

# 读取.env文件中的PORT配置
PORT=$(grep "^PORT=" .env | cut -d '=' -f2 || echo "8080")

# 查找并终止占用指定端口的进程
pid=$(lsof -t -i:$PORT)
if [ ! -z "$pid" ]; then
    echo "正在终止端口 $PORT 上的进程..."
    kill -9 $pid
fi

# 运行npm dev
echo "启动开发服务器..."
npm run dev