vue 打包部署
2023-06-13 09:13:17 时间
一、vue 打包并部署(nginx)
打包
npm run build
默认打包情况如下:
部署
首先需要安装 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
},
打包部署
- 打包
npm run build // 打包
- 添加站点和文件 在宝塔添加站点,并把以下文件上传到网站根目录下
- package.json
- nuxt.config.js
- static
- .nuxt
3.安装依赖 在网站目录下打开终端
npm i // 安装项目依赖
4.访问测试
npm run start // 运行项目
注意把 nuxt.config.js >server>host 设置为 0.0.0.0
当项目运行后可以看到地址 此时通过 IP 地址+口号就可以访问项目了
- 配置 Nginx
这里的地址必须是 127.0.0.1:端口 端口号为 nuxt.config.js >server>prot
- 使用 pm2 运行项目
回到网站根目录打开终端
注意把$Name 替换成需要在 pm2 管理器上展示的项目名称 注意 – start 之间的空格
pm2 start npm --name $Name -- start // 运行项目
pm2 save // 保存
- 完成
完成部署 现在你可以去查看你的网站了
也可以在 PM2 管理器中管理它 如果没有就下载一个
相关文章
- 尚硅谷Vue课程P30-P35笔记(后台回复 vue 可获得更多笔记!)
- Vue-Cli优化编译速度
- vue数组拼接[通俗易懂]
- vue父子组件传值 简单了解vuex
- JS之在Vue对象内部获取vue对象的索引(箭头函数的闭包导致this代表的是函数本身)「建议收藏」
- Vue笔记(5)
- vue.js 渲染函数_Vue.js的不可渲染且可扩展的RTF编辑器[通俗易懂]
- Vue(五)计算属性、过滤器、axios、vue 生命周期
- vue上传文件流
- vue + echarts 省份地图 以及打包后地图加载不出来(比较详细)「建议收藏」
- vue 父组件调用子组件的方法_vue子组件修改父组件值
- vue分页功能
- vue axios轮询更新echarts 页面崩溃问题
- Vue项目:菜农管理 【maven + spring boot + RESTFul + SSM+vue + axios】
- ruoyi-vue版本(七)定时任务 相关的源码解析,也就是ruoyi-quartz 模块的解析
- vue源码分析-从new Vue开始_2023-02-24
- vue移动端h5页面根据屏幕适配的四种方案
- IDEA安装Vue插件后为什么创建.vue文件不显示vue图标
- vue-smooth-dnd
- 使用Vue技术从MSSQL中获取数据(vue获取mssql数据)
- Vue接入Redis拓展应用的可能性(vue调redis)
- Vue实现Redis订阅消息的实现方案(vue 订阅redis)
- Vue调用Redis体验更好的开发效率(vue能调redis吗)
- Vue如何连接Redis(vue怎么连接Redis)
- Vue结合Redis实现性能优化(vue引入redis)
- 优化网站性能,Vue搭配Redis缓存更加有效(vue使用redis缓存)
- Vue中触发Redis订阅通知(vue中订阅redis)