Vite+Vue快速搭建项目 • Soulmate

Vite+Vue快速搭建项目#

npm init vite@latest

输入项目名，选择Vue  选择TypeScript  回车

> npx
> create-vite

│
◇  Project name:
│  ApmDataAnalytics
│
◇  Package name:
│  apmdataanalytics
│
◇  Select a framework:
│  Vue
│
◇  Select a variant:
│  TypeScript
│
◇  Use rolldown-vite (Experimental)?:
│  No
│
◇  Install with npm and start now?
│  Yes

再运行

npm install

-y 快速创建一个默认的包信息

npm init -y

-D开发环境中的依赖，加载vite

npm i vite -D

生成"devDependencies"，开发环境下的依赖

从工作区index.html为入口

项目入口文件#

主入口： index.html

这是整个项目的 HTML 入口文件
包含一个
容器，Vue 应用会挂载到这里
通过引入 TypeScript 主文件 JavaScript 入口： src/main.ts
这是项目的 JavaScript/TypeScript 入口文件
负责创建 Vue 应用实例、注册插件、挂载到 DOM

核心文件说明配置文件#

package.json : 项目依赖和脚本配置
vite.config.ts : Vite 构建工具配置
tsconfig.json : TypeScript 编译配置
.eslintrc.cjs : 代码规范检查配置源码目录 ( src/ )

src/
├── App.vue              # 根组件
├── main.ts              # 项目入口文件
├── config.ts            # 配置文件（API地址
等）
├── style.css            # 全局样式
├── components/          # 组件目录
│   ├── ReportInfoPage.vue    # 报告信息页
面组件
│   ├── ComponentsSwitch.vue  # 组件切换器
│   └── common/               # 通用组件
└── tools/               # 工具类目录
    ├── interface.ts     # TypeScript 接口
    定义
    ├── store.ts         # 全局状态管理
    ├── page.ts          # 分页逻辑
    ├── process.ts       # 数据处理函数
    └── tools.ts         # 工具函数

文件加载机制#

1. 浏览器加载 index.html
2. index.html 引入 src/main.ts
3. main.ts 创建 Vue 应用实例
4. 挂载 App.vue 根组件到 #app 容器
5. App.vue 渲染其他子组件

Vue 文件加载#

.vue 文件是 Vue 单文件组件（SFC）
包含 <template> （模板）、 <script> （逻辑）、 <style> （样式）三部分
Vite 会自动编译 .vue 文件为 JavaScript

TypeScript 文件加载#

.ts 文件会被 TypeScript 编译器编译为 JavaScript
通过 import/export 语法进行模块导入导出
@/ 是路径别名，指向 src/ 目录

快速上手指南#

npm run dev    # 启动开发服务器

npm run build  # 构建生产版本

npm run lint   # 代码检查
npm run format # 代码格式化

main.ts说明#

import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import './style.css'
import App from './App.vue'
import router from './services/router'

const app = createApp(App)

app.use(ElementPlus)
app.use(router)

app.mount('#app') //开始执行App.vue内容   前面的都是在导入和注册

onMounted, onUnmounted函数的作用#

选项式 API	组合式 API	执行时机
`mounted`	`onMounted`	组件挂载到 DOM 后
`unmounted`	`onUnmounted`	组件从 DOM 卸载前

静态文件服务器部署#

使用 Node.js 静态服务器

npm install -g serve

现在可以使用 serve 来部署您的应用：

serve -s dist -l 3000

生产环境服务器 : http://localhost:3000
网络访问 : http://xxx.16.10.xx:3000

什么是浏览器的同源策略限制#

同源策略是浏览器的一种重要安全机制，它阻止一个源的文档或脚本与另一个源的资源进行交互。

“同源"的判断标准

两个 URL 在以下三个方面完全相同时才算是同源：

协议（Protocol）：http、https、ftp 等
域名（Domain）：www.example.com、api.example.com 等
端口（Port）：80、443、3000 等

示例分析

当前页面	请求目标	是否同源	原因
`https://example.com/app`	`https://example.com/api`	✅ 是	协议、域名、端口都相同
`https://example.com`	`http://example.com`	❌ 否	协议不同（https vs http）
`https://example.com`	`https://api.example.com`	❌ 否	域名不同（主域 vs 子域）
`https://example.com`	`https://example.com:8080`	❌ 否	端口不同（443 vs 8080）

为什么会导致CORS错误？#

CORS（跨源资源共享） 是一种机制，允许服务器声明哪些外部源可以访问其资源。当违反同源策略时就会产生 CORS 错误。

CORS 错误的典型场景

// 前端运行在 http://localhost:3000
// 尝试访问不同源的 API
fetch('https://api.example.com/data')
  .then(response => response.json())
  .catch(error => {
    console.error('CORS错误:', error)
    // 错误信息: Access to fetch at 'https://api.example.com' 
    // from origin 'http://localhost:3000' has been blocked by CORS policy
  })

服务器docker部署#

# 使用官方 Node.js 运行时作为父镜像
FROM node:18-alpine

# 设置工作目录
WORKDIR /app

# 将 package.json 和 package-lock.json 复制到工作目录
COPY package*.json ./

# 安装依赖
RUN npm ci --only=production

# 将源代码复制到工作目录
COPY . .

# 暴露应用程序运行的端口
EXPOSE 3000

# 定义环境变量
ENV NODE_ENV=production

# 运行应用程序
CMD ["node", "server.js"]

docker build -t apm .

docker run -d -p 3000:3000 apm

hl@debian:~/ApmDataAnalytics$ docker pull node:18-alpine
Error response from daemon: Get "https://registry-1.docker.io/v2/": net/http: request canceled while waiting for connection (Client.Timeout exceeded while awaiting headers)
hl@debian:~/ApmDataAnalytics$ sudo tee /etc/docker/daemon.json <<-'EOF'
> {
>   "registry-mirrors": ["https://xxxxx.mirror.aliyuncs.com"],
>   "dns": ["114.114.114.114", "8.8.8.8"]
> }
> EOF
{
  "registry-mirrors": ["https://8uch1f9c.mirror.aliyuncs.com"],
  "dns": ["114.114.114.114", "8.8.8.8"]
}
hl@debian:~/ApmDataAnalytics$ sudo systemctl daemon-reload
hl@debian:~/ApmDataAnalytics$ sudo systemctl restart docker

遇到代理问题

hl@debian:~/ApmDataAnalytics$ sudo mkdir -p /etc/systemd/system/docker.service.d
hl@debian:~/ApmDataAnalytics$ sudo tee /etc/systemd/system/docker.service.d/http-proxy.conf <<-'EOF'
> [Service]
> Environment="HTTP_PROXY=http://172.16.10.95:10808"
> Environment="HTTPS_PROXY=http://172.16.10.95:10808"
> Environment="NO_PROXY=localhost,127.0.0.1"
> EOF
[Service]
Environment="HTTP_PROXY=http://172.16.10.95:10808"
Environment="HTTPS_PROXY=http://172.16.10.95:10808"
Environment="NO_PROXY=localhost,127.0.0.1"
hl@debian:~/ApmDataAnalytics$ sudo systemctl daemon-reload
hl@debian:~/ApmDataAnalytics$ sudo systemctl restart docker

阿里镜像加速器

访问：https://cr.console.aliyun.com/cn-hangzhou/instances/mirrors