vue 打包部署

一、vue 打包并部署(nginx)

打包

npm run build

默认打包情况如下:

image-20221118172536010

部署

首先需要安装 nignx,可以看我之前的博客:CentOS 7 安装 Nginx

nginx.conf 文件中配置

server {
    listen       8001;
    server_name  localhost;

    location / {
        # windows: root  "H:/yygh-admin/dist";
        root  "/opt/app/dist";
        index  index.html index.htm;
    }

    location /api/ {
        # 后端的真实接口
        proxy_pass http://127.0.0.1:8080;
    }

    error_page   500 502 503 504  /50x.html;

    location = /50x.html {
    root   html;
    }
}

二、nuxt.js 项目打包部署

nuxt.config.js

  server: {
    port: 8080, // 端口
    host: '0.0.0.0', // 本地 host
  },

打包部署

  1. 打包
npm run build  // 打包
  1. 添加站点和文件
    在宝塔添加站点,并把以下文件上传到网站根目录下
  • package.json
  • nuxt.config.js
  • static
  • .nuxt

image-20221118173735659

3.安装依赖
在网站目录下打开终端

npm i  // 安装项目依赖

4.访问测试

npm run start // 运行项目

注意把 nuxt.config.js >server>host 设置为 0.0.0.0

当项目运行后可以看到地址 此时通过 IP 地址+口号就可以访问项目了
终端

  1. 配置 Nginx

这里的地址必须是 127.0.0.1:端口 端口号为 nuxt.config.js >server>prot

image-20221118173938123

  1. 使用 pm2 运行项目

回到网站根目录打开终端

注意把$Name 替换成需要在 pm2 管理器上展示的项目名称

注意 — start 之间的空格

pm2 start npm --name $Name -- start  // 运行项目
pm2 save // 保存
  1. 完成

完成部署 现在你可以去查看你的网站了

也可以在 PM2 管理器中管理它

如果没有就下载一个image-20221118174221864

© 版权声明
THE END
喜欢就支持一下吧
点赞0 分享
相关推荐
  • 暂无相关文章
  • 评论 抢沙发
    头像
    欢迎您留下宝贵的见解!
    提交
    头像

    昵称

    取消
    昵称表情代码图片