# vue-website-template

**Repository Path**: fuwenwei501/vue-website-template

## Basic Information

- **Project Name**: vue-website-template
- **Description**: web 站点模板
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2021-12-02
- **Last Updated**: 2022-05-25

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# vue-website-template (网站系统模版)

<a href="https://github.com/vuejs/vue">
  <img src="https://img.shields.io/badge/vue-2.6.11-brightgreen.svg" alt="vue">
</a>
<a href="https://github.com/ElemeFE/element">
  <img src="https://img.shields.io/badge/element--ui-2.15.6-brightgreen.svg" alt="element-ui">
</a>
<a href="https://github.com/greper/d2-crud-plus">
  <img src="https://img.shields.io/badge/d2--crud--plus-2.17.7-brightgreen.svg" alt="d2-crud-plus">
</a>
<a href="https://axios-http.com/">
  <img src="https://img.shields.io/badge/axios-0.21.4-brightgreen.svg" alt="axios">
</a>
<a href="https://necolas.github.io/normalize.css">
  <img src="https://img.shields.io/badge/normalize.css-8.0.1-brightgreen.svg" alt="normalize">
</a>
<a href="https://github.com/fuyi501/vue-element-admin/blob/master/LICENSE">
  <img src="https://img.shields.io/github/license/mashape/apistatus.svg" alt="license">
</a>

## 安装

```sh
# 克隆项目
git clone https://gitee.com/fuwenwei501/vue-website-template.git

# 进入项目目录
cd vue-website-template

# 安装依赖
npm install

# 启动项目
npm run serve

# 编译项目
npm run build
```

## 效果展示

![](https://s2.loli.net/2021/12/16/AkzJ4nr9ONW1KBG.png)
## 部署

### Docker (Nginx)

1、安装 [Docker](https://www.docker.com/get-started)

2、编译项目文件

```sh
npm run build
```

3、使用 nginx 镜像构建 vue 应用镜像

```sh
docker pull nginx
```

4、创建 nginx 配置文件

在项目根目录下创建 `nginx` 文件夹，该文件夹下新建文件 `default.conf`

```sh
server {
    listen       80;
    server_name  localhost;

    #charset koi8-r;
    access_log  /var/log/nginx/host.access.log  main;
    error_log  /var/log/nginx/error.log  error;

    location / {
        root   /usr/share/nginx/html;
        index  index.html index.htm;
    }

    #error_page  404              /404.html;

    # redirect server error pages to the static page /50x.html
    #
    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   /usr/share/nginx/html;
    }
}

```

该配置文件定义了首页的指向为 `/usr/share/nginx/html/index.html`, 所以我们可以一会把构建出来的 index.html 文件和相关的静态资源放到 `/usr/share/nginx/html` 目录下。

5、创建 Dockerfile 文件

```dockerfile
FROM nginx
COPY dist/ /usr/share/nginx/html/
COPY nginx/default.conf /etc/nginx/conf.d/default.conf
```

6、基于该 Dockerfile 构建 vue 应用镜像

```sh
# 注意不要少了最后的 “.”
# -t 是给镜像命名 . 是基于当前目录的 Dockerfile 来构建镜像
docker build -t vue-website-template .
```

7、运行 vue 应用镜像

```sh
docker run -d -p 9528:80 --name=vue-website-template vue-website-template
```

8、访问 vue 应用

打开浏览器，访问项目地址就可以了

## License

[MIT](https://github.com/PanJiaChen/vue-element-admin/blob/master/LICENSE)