# ttsx-frontend-vue2

**Repository Path**: muyu-chengfeng/ttsx-frontend-vue2

## Basic Information

- **Project Name**: ttsx-frontend-vue2
- **Description**: 天天生鲜超市前端项目（Vue2版本），端口号8087。
- **Primary Language**: HTML
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-10-08
- **Last Updated**: 2025-11-12

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# ttsx-frontend-vue2

## 项目介绍

天天生鲜超市前端项目（Vue2版本），端口号8087。



Vue3版本项目地址

```
https://gitee.com/muyu-chengfeng/ttsx-frontend-vue3.git
```



后端项目地址

```
https://gitee.com/muyu-chengfeng/ttsx-backend.git
```



基础版本（前后端不分离）项目地址

```
https://gitee.com/muyu-chengfeng/ttsx.git
```



## 启动项目

### 第一步、安装依赖

```
npm install
```



### 第二步、运行项目

```
npm run serve
```



## 部署项目

本章节介绍如何在Ubuntu操作系统上基于Docker部署本项目。



### 1、创建项目目录

创建/opt/applications/ttsx目录，保存天天生鲜超市前端项目的相关部署文件。

```bash
 mkdir /opt/applications/ttsx
```



### 2、拉取nginx镜像

```bash
docker pull nginx:1.22.1
```



### 3、编译并上传项目

在vue脚手架项目的目录下运行编译打包的命令

```bash
npm run build
```



![](docs/文档图片/1、编译项目.png)



然后鼠标右键点击项目下的任意文件，依次点击右键菜单的【Open In ==> Explorer】，在文件管理器打开

![](docs/文档图片/2、在文件管理器打开.png)



把dist目录压缩为dist.zip，压缩包的结构如下。

![](docs/文档图片/3、压缩dist目录.png)



把dist.zip上传到Ubuntu的/opt/applications/ttsx目录下

![](docs/文档图片/4、上传dist.zip到ttsx目录.png)



### 4、创建并启动容器

把项目/docs目录下的三个文件上传到Ubuntu的/opt/applications/ttsx目录。

- build_images.sh
- nginx.conf
- Dockerfile



给build_images.sh授予执行权限

```bash
chmod +x ./build_images.sh
```



然后执行脚本，即完成镜像的构建

```bash
./build_images.sh
```



最后，通过docker命令运行镜像，生成并运行容器。

```bash
docker run -d -p 8087:8087 -v /opt/applications/ttsx/nginx.conf:/etc/nginx/nginx.conf 
--name ttsx ttsx-frontend:20250826 
```



或者在Portainer中创建一个Stack，填写docker-compose.yml

```yaml
version: "3"

services:
  ttsx:
    container_name: ttsx-frontend
    image: ttsx-frontend:20250826
    ports:
      - 8087:8087
    volumes:
      - /etc/nginx/nginx.conf:/etc/nginx/nginx.conf
```