前端部署
一、软件环境
- NodeJs,要求 node版本 >= 18 (可以通过
node -v
命令来查看) - Nginx / Opresty / Tengine
二、修改url
根据打包环境,修改如下:
.env.test 测试环境
.env.pre 预发布环境
.env.prod 生产环境
只需修改文件中的 VITE_APP_API_URL
和 VITE_APP_TITLE
,如下:
json
VITE_APP_API_URL = 'https://gz.1024lab.net/smart-admin-api'
VITE_APP_TITLE = 'Smart固定资产管理系统'
三、修改前端访问路径
打开vite.config.js
文件:
修改如下base
变量:
js
export default {
base: process.env.NODE_ENV === 'production' ? '/' : '/',
root: process.cwd(),
resolve: {
alias: [
四、执行打包命令
对于正式环境,需要执行 的打包命令:
vim
npm run build:prod
打包成功以后会生成 /dist
目录
若是打包 测试环境,执行 npm run build:test
若是打包 预发布环境,执行 npm run build:pre
五、nginx配置
将第四步生成的 /dist
目录复制到服务器中,然后进行 nginx
如下配置:
5.1、带缓存配置
vim
location / {
alias /home/smart-admin/smart-admin-v3-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;
}
}
5.2、无缓存配置
vim
location / {
alias /home/smart-admin/smart-admin-v3-preview/;
try_files $uri $uri/ /index.html last;
index index.html;
expires -1;
}