vue项目打包部署流程分析
一、打包
（可选）去除打包后会生成的map文件：在vue.config.js中添加productionSourceMap: false,
map文件作用：项目打包后，代码都是经过压缩加密的，如果运行时报错，输出的错误信息无法准确得知是哪里的代码报错。map文件可以准确输出报错位置。
项目终端运行npm run build，出现的dist文件即为打包后的文件
二、部署
xshell连接服务器（此处服务器为centos7）
利用xfp在服务器/root目录下新建文件夹，将刚才打包生成的dist文件放到该文件夹下
进入/etc目录，目录中有一个nginx目录，进入该目录。如果没有nginx目录说明没有安装nginx，需要安装nginx：在/etc目录下运行yum install nginx
修改nginx配置，运行vim nginx.conf进行编辑
按 i 开始编辑，添加
locatioin / {}配置使访问服务器即可访问到项目，为root部署到服务器的路径
location /api {}配置nginx反向代理，使得服务器可以获取从其他服务器获取的数据，/api为项目配置时代理跨域的路径名，proxy_pass为对应服务器地址
注意1：添加配置时要注意空格、分号及单词拼写，由于windows和Linux空格不同，此处最好自己手写，不要复制
注意2：还要将开头的user nginx改成user root，不改访问网址会报500错误
注意3：修改完后restart nginx，start无效
按esc退出编辑
输入:wq进行保存
重新运行nginx：systemctl restart nginx
访问服务器地址，即可访问到项目
注：4-8步可通过xftp直接在nginx.conf文件中进行编辑，但也要注意空格
补充：
systemctl status nginx：查看nginx状态
systemctl start nginx：启动nginx
systemctl stop nginx：停止nginx
systemctl restart nginx：重启nginx
三、部署多个项目
在nginx.conf中修改配置，访问时用服务器地址/sph即可访问
到此这篇关于vue项目打包部署流程的文章就介绍到这了,更多相关vue打包部署内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
我们最开始拿到的element-ui是带有下拉箭头的,那么如何去除element-ui下拉框的下拉箭头的实现,本文就详细的介绍一下,感兴趣的可以了解一下2023-08-08
大部分中文应用弹出的默认键盘是简体中文输入法键盘,在输入用户名和密码的时候,如果使用简体中文输入法键盘,用户的输入记录会被缓存下来所以我们需要一个安全键盘,本文给大家介绍了如何基于vue封装一个安全键盘组件,需要的朋友可以参考下2023-12-12
在前端开发中,Vue.js 是一个广泛使用的框架,因其灵活性和强大的功能,得到许多开发者的喜爱,Vue 3 的发布为这一框架带来了很多新的特性和改进,在本文中,我们将详细讨论如何在 Vue 3 中创建和使用全局组件,并通过示例代码展示具体实现方式,需要的朋友可以参考下2024-07-07
详解Vue中localstorage和sessionstorage的使用
这篇文章主要介绍了详解Vue中localstorage和sessionstorage的使用方法和经验心得，有需要的朋友跟着小编参考学习下吧。2017-12-12
这篇文章主要介绍了vue中require与import的区别详解,require相当于module.exports的传送门,module.exports后面的内容是什么,require的结果就是什么,对象、数字、字符串、函数,再把require的结果赋值给某个变量,需要的朋友可以参考下2023-10-10
这篇文章主要介绍了Python合成Excel表的实现代码（多sheet）,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2021-04-04
在实际开发中导入功能是非常常见的,导入功能前端并不难,下面这篇文章主要给大家介绍了关于如何使用vue实现前端导入excel数据的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2023-04-04
这篇文章给大家介绍了ElementUI实现el-table列宽自适应的详细步骤,文中通过代码示例给大家介绍的非常详细,对大家的学习或工作有一定的帮助,需要的朋友可以参考下2024-01-01
这篇文章主要给大家介绍了关于Vue中进行打包与部署的相关资料, 我们常使用前后端分离项目时,会需要将前端vue打包然后部署,需要的朋友可以参考下2023-09-09
element的el-tree多选树(复选框)父子节点关联不关联
最近想要实现多选框关联的功能，但是却出现了element的el-tree多选树(复选框)父子节点关联不关联的问题，本文就来介绍一下解决方法，一起来了解一下2021-05-05
最新评论