TP组件文档

文档版本

版本: vuepress x1
版本号: "vuepress": "^1.9.9"

---

文档目录

表单文档：了解表单基本用法(基本数据绑定,操作，验证，介绍系统按钮)
表格文档：了解表格基本用法

---

打包模式

启用4个webpage 打包命令 这四个打包命令的区别在于它们使用不同的模式（mode）来构建 `Vue.js` 项目。不同的模式会为您的应用程序提供不同的构建配置，以便在不同的环境中运行。

`"build": "vue-cli-service build --mode development"`
这个命令将以开发模式构建应用程序。在此模式下，Vue.js 应用程序将使用开发环境中的配置和插件进行构建，输出的代码不会被压缩或混淆，以方便开发调试。这个命令适用于在开发阶段进行构建和调试。

`"build:stage": "vue-cli-service build --mode staging"
这个命令将以预发布模式构建应用程序。在此模式下，Vue.js 应用程序将使用与生产环境相同的配置和插件进行构建，但是不同的是输出的代码未被压缩或混淆，并且具有某些用于调试和测试的额外信息。这个命令适用于在将应用程序发布到生产环境之前进行预发布测试。

`"build:prod": "vue-cli-service build --mode production"`
这个命令将以生产模式构建应用程序。在此模式下，Vue.js 应用程序将使用生产环境中的配置和插件进行构建，输出的代码将被压缩和混淆，以最大程度地减少文件大小和提高性能。这个命令适用于将应用程序部署到生产环境。

`"prod": "vue-cli-service serve --mode production"`
这个命令将启动一个服务器以在生产模式下运行应用程序。与上一个命令不同的是，它不会构建代码并将其输出到文件中，而是使用内存中的构建文件直接运行应用程序。这个命令适用于在开发阶段以生产模式运行应用程序，以便测试性能和其他生产环境问题。

注意

这四个命令都用于构建和运行 Vue.js 应用程序，但它们使用的模式不同，适用于不同的环境和场景。根据您的需要，选择适当的命令来构建和运行您的应用程序。

部署配置

Nginx配置

配置

worker_processes  1;
events {
    worker_connections  1024;
}
http {
    include       mime.types;
    default_type  application/octet-stream;
    sendfile        on;
    keepalive_timeout  65;
    server {
        listen       80;
        server_name  localhost;
		charset utf-8;
		location / {
            root   /home/ruoyi/projects/ruoyi-ui;
			try_files $uri $uri/ /index.html;
            index  index.html index.htm;
        }
		location /prod-api/ {
			proxy_set_header Host $http_host;
			proxy_set_header X-Real-IP $remote_addr;
			proxy_set_header REMOTE-HOST $remote_addr;
			proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
			proxy_pass http://localhost:8080/;
		}
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
    }
}

开启Gzip压缩

## 开启Gzip压缩
在http配置中加入如下代码对全局的资源进行压缩，可以减少文件体积和加快网页访问速度。
# 开启gzip压缩
gzip on;
# 不压缩临界值，大于1K的才压缩，一般不用改
gzip_min_length 1k;
# 压缩缓冲区
gzip_buffers 16 64K;
# 压缩版本（默认1.1，前端如果是squid2.5请使用1.0）
gzip_http_version 1.1;
# 压缩级别，1-10，数字越大压缩的越好，时间也越长
gzip_comp_level 5;
# 进行压缩的文件类型
gzip_types text/plain application/x-javascript text/css application/xml application/javascript;
# 跟Squid等缓存服务有关，on的话会在Header里增加"Vary: Accept-Encoding"
gzip_vary on;
# IE6对Gzip不怎么友好，不给它Gzip了
gzip_disable "MSIE [1-6]\.";