3.8、前端部署

11/7/2022

# 一、软件环境

  • NodeJs,要求 node版本 >= 14 (可以通过node -v命令来查看)
  • Nginx / Opresty / Tengine

# 二、修改url

根据打包环境,修改如下:

.env.test 测试环境
.env.pre  预发布环境
.env.prod 生产环境
1
2
3

只需修改文件中的 VITE_APP_API_URLVITE_APP_PROJECT_TITLE,如下:

VITE_APP_API_URL = 'http://127.0.0.1:8888/smart-admin-api'

VITE_APP_PROJECT_TITLE = 'Smart固定资产管理系统'

1
2
3
4

# 三、修改前端访问路径

打开vite.config.js文件:

修改如下base变量:

export default {
  base: process.env.NODE_ENV === 'production' ? '/' : '/',
  root: process.cwd(),
  resolve: {
    alias: [
1
2
3
4
5

# 四、执行打包命令

对于正式环境,需要执行 正式环境的打包命令:

npm run build:prod
1

打包成功以后会生成 /dist目录

若是打包 测试环境,执行 npm run build:test
若是打包 预发布环境,执行 npm run build:pre

# 五、nginx配置

将第四步生成的 /dist 目录复制到服务器中,然后进行 nginx 如下配置:

# 5.1、带缓存配置

  location / {
        alias /home/smart-admin/smart-admin-v2-preview/;
        try_files $uri $uri/ /index.html last;
        index  index.html;
        #对于index.html首页,不缓存
        expires -1;
        #对于静态资源文件(非index.html首页)缓存 30天
        if ($request_filename ~* .*\.(?:jpg|jpeg|gif|png|ico|cur|gz|svg|svgz|mp4|ogg|ogv|webm|css|js)$){
              expires 30d;
        }
  }
1
2
3
4
5
6
7
8
9
10
11

# 5.2、无缓存配置

    location / {
        alias /home/smart-admin/smart-admin-v2-preview/;
        try_files $uri $uri/ /index.html last;
        index  index.html;
        expires -1;
    }
1
2
3
4
5
6

# 联系我们

1024创新实验室-主任:卓大 (opens new window),混迹于各个技术圈,研究过计算机,熟悉点 java,略懂点前端。
1024创新实验室(河南·洛阳) (opens new window) 致力于成为中原领先、国内一流的技术团队,以技术创新为驱动,合作各类项目(软件外包、技术顾问、培训等等)。

加 主任 “卓大” 微信
拉你入群,一起学习
关注 “小镇程序员”
分享代码与生活、技术与赚钱
请 “1024创新实验室” 喝咖啡
支持我们的开源与分享

告白气球 (钢琴版)
JESSE T