部署vue.js3.x项目到线上(vue.js 3.2.6/nginx 1.18.0)
2023-09-14 08:59:32 时间
一,在本地打包vue.js项目:
1,进入项目目录,
查看vue.js的版本:
liuhongdi@lhdpc:/data/vue/storeweb$ npm list vue storeweb@0.1.0 /data/vue/storeweb ├─┬ @vue/cli-plugin-babel@4.5.13 │ └─┬ @vue/babel-preset-app@4.5.13 │ └── vue@3.2.6 deduped ├─┬ element-plus@1.1.0-beta.7 │ └── vue@3.2.6 deduped ├─┬ vue-router@4.0.11 │ └── vue@3.2.6 deduped └── vue@3.2.6
2,查看需要在nginx上设置的url:
liuhongdi@lhdpc:/data/vue/storeweb$ more vue.config.js 'use strict' module.exports = { publicPath: './', lintOnSave: process.env.NODE_ENV === 'development', productionSourceMap: false, devServer: { proxy: { ['/api']:{ target:`http://127.0.0.1:10800/`, changeOrigin:true, pathRewrite: { ['^/api']: '' } } } }, …
可以确定api打头的接口地址需要在nginx中进行设置
3,进行打包:
liuhongdi@lhdpc:/data/vue/storeweb$ npm run build
4,查看dist目录下的打包结果:
liuhongdi@lhdpc:/data/vue/storeweb$ ls dist css favicon.ico fonts index.html js
说明:刘宏缔的架构森林是一个专注架构的博客,地址:https://www.cnblogs.com/architectforest
对应的源码可以访问这里获取: https://github.com/liuhongdi/
或: https://gitee.com/liuhongdi
说明:作者:刘宏缔 邮箱: 371125307@qq.com
二,服务端:配置nginx虚拟主机
1,创建一个虚拟主机:
[root@blog conf.d]# vi storeweb.conf
内容:
server { listen 80; server_name store.lhdtest.net; root /data/store/web/html; index index.html; location /api { rewrite ^/api/(.*)$ /$1 break; proxy_set_header Host $host; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; proxy_pass http://localhost:10800; } location / { try_files $uri $uri/ /index.html; } access_log /data/logs/nginxlogs/store_web.access_log; error_log /data/logs/nginxlogs/store_web.error_log; }
说明:要针对api打头的url访问转发到后端的接口服务
三,从本地上传dist目录下的文件到服务端
1,创建documentroot目录
[root@blog conf.d]# mkdir -p /data/store/web/html
2,把打包后dist目录中的文件上传到新创建的目录
3,在服务端查看上传后效果:
[root@blog ~]# ls /data/store/web/html/ css favicon.ico fonts index.html js
四,上传后,测试效果
1,重启nginx
[root@blog ~]# systemctl reload openresty.service
2,从浏览器查看效果:
说明:页面中当前域一项,是从后端的api接口获取的,
在生产环境中应该先部署好后台接口站,
此处仅做演示
五,本地:查看@vue/cli 及node的版本:
liuhongdi@lhdpc:/data/vue/storeweb$ vue -V @vue/cli 4.5.13 liuhongdi@lhdpc:/data/vue/storeweb$ node -v v14.17.1
六,服务端:查看nginx的版本:
[root@centos8 nginx-1.18.0]# /usr/local/soft/nginx-1.18.0/sbin/nginx -v nginx version: nginx/1.18.0
相关文章
- vue+element-ui 使用富文本编辑器
- 初识js中的闭包_Js闭包中变量理解
- vue项目性能优化-前端加分项
- vue.js中实现阻止事件冒泡
- vue如何引用外部js_引入外部js文件
- vue项目引入外部原生js文件_php引入文件的四个方法
- vue跨域解决的几种方案「建议收藏」
- Vue项目:菜农管理 【maven + spring boot + RESTFul + SSM+vue + axios】
- Vue.js官方的路由管理器 带你快速入门
- 8 个很棒的 Vue 开发技巧
- vue.js客服系统实时聊天项目开发(一)路由与子路由-全局变量-elementui搭建基本框架
- vue.js客服系统实时聊天项目开发(二)
- vue.js客服系统实时聊天项目开发(三)实现对话框聊天界面
- vue.js客服系统实时聊天项目开发(四)引入iconfont图标代码
- vue.js客服系统实时聊天项目开发(六)获取URL中的GET参数(支持/#/?单页锚点hash模式)
- vue.js客服系统实时聊天项目开发(十二)自动欢迎信息的延迟展示效果
- vue.js客服系统实时聊天项目开发(十五)实现聊天界面滚动到底部
- vue.js客服系统实时聊天项目开发(十六)连接websocket实时处理消息,断线重连,处理服务端关闭指令
- vue.js客服系统实时聊天项目开发(十八)仿淘宝商品页面点在线客服传递产品卡片
- vue.js客服系统实时聊天项目开发(十九)使用正则将消息格式替换为产品卡片信息
- 「.vue文件的编译」2. 模板编译之 simple-html-parser.js
- vue入门篇之Vue.js 组件
- 开心档-软件开发入门之Vue.js Ajax(vue-resource)
- ajax放在vue的哪个 生命周期 中?
- vue.js 浏览器中不显示vue devtools详解编程语言
- CSS和JS标签style属性对照表(方便js开发的朋友)