前端打包运行dist的三种方法

时间：2025-03-03 13:45:48

node安装http-server

1.全局安装
npm install http-server -g

2.在 dist 根目录下执行
http-server

3.在浏览器上打开 url

express运行dist

根据项目的依赖安装方式选择npm/yarn/pnpm
步骤：

  1. npm install express
    2.在项目下，创建文件

  2. yarn add express
    2.在项目下，创建文件

  3. pnpm add express
    2.在项目下，创建文件

// 导入express包
const express = require(‘express’)
// 创建应用app
const app = express()
//指定静态资源对象
((‘./dist’))
// 监听80端口
(80,()=>{
(“服务已经启动，127.0.0.1:80端口”)
})

注意：指定80端口，如果是https,需要指定443端口。
3.启动项目
node
4.访问链接
http://127.0.0.1/#/login或者 http://127.0.0.1

nginx常用指令

nginx -t // 检查配置文件
start nginx / nginx //启动nginx
nginx -s reload //重载加载配置
taskkill /im /f //杀死进程

双击

nginx运行dist

部署步骤
1.在nginx的安装文件位置打开终端或者双击终端（一闪而过代表启动成功）
文件放在html下
3.配置nginx下面的conf文件里的并保存

#user  root;  //权限不够404错误改为root
 server {
        listen       80;
        server_name  localhost;     #本地localhost 或ip 或前端域名不包含端口号

        #charset koi8-r;

        #access_log  logs/host.access.log  main;

        location / {
            root   html\dist;            #dist文件的路径
            index  index.html index.htm;
            try_files $uri $uri/ /index.html; #官网给出的解决页面刷新404问题的方式    
        }
      
        location /prod-api/ {
            proxy_pass http://192.168.11.204:8022/; # 修改为API接口地址（后端接口服务器地址）
            proxy_set_header Host $host;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
      }

4.访问 http://localhost 或者http://localhost：端口号 或者 前端域名

相关文章