vue项目如何分环境部署
更新时间：2018年12月07日 14:43:20 作者：WalkerShen
这篇文章主要介绍了vue项目如何分环境部署问题，具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
vue部署
1、相关配置
staging可以认为是测试环境，production可以认为是正式环境
vue.config.js需要进行配置，多环境的时候，这里主要看具体的情况，根据具体情况去设计，我这里是有两个环境，需要部署在同个服务器上，所以需要生成不同的包
2、查看package.json脚本
并执行
假设我这里是部署测试环境，则使用
npm run build:stage
执行之后则会生成一个文件夹
里边存放着编译后的东西
3、将编译后的文件夹放到linux服务器上
并记住存放位置
例如我是放在这个位置的,具体的上传方式很多，可以使用xshell，也可以使用finalShell，这里就不细讲
4、配置nginx
这里自己找一下自己的nginx.conf文件
如果不知道nginx安装在哪的话，使用
ps -ef|grep nginx
就可以找到路径了，放在conf/nginx.conf目录下
user root;
worker_processes 1;
events {
worker_connections 1024;
}
http {
include mime.types;
default_type application/octet-stream;
sendfile on;
keepalive_timeout 65;
server {
# 端口
listen 81;
server_name localhost;
# nginx的默认页面
location / {
root html;
index index.html index.htm;
}
# 这里配置的是测试服的，也就是说当你访问 ip:81/test-qd-web的时候，
# 他就会/opt/test/qd_cold_chain/test-qd-web 文件夹下查找文件
location /test-qd-web {
root /opt/test/qd_cold_chain;
index index.html index.htm;
}
# 同上，正式服的
location /qd_web {
root /opt/qd_cold_chain;
index index.html index.htm;
}
}
}5、重载nginx
进入到nginx的sbin目录下，执行
./nginx -s reload
6、访问目录
ip:端口/test-qd-web
访问成功就ok了
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
今天小编就为大家分享一篇vue-cli项目无法用本机IP访问的解决方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
这篇文章主要介绍了vue从一个页面跳转到另一个页面并携带参数的解决方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-08-08
vue中实现支持txt,docx,xlsx,mp4格式文件预览功能(纯前端)
对于Vue你可以实现文件的预览功能,这篇文章主要给大家介绍了关于vue中实现支持txt,docx,xlsx,mp4格式文件预览功能的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下2023-11-11
这篇文章主要为大家详细介绍了vue实现移动端可拖拽式icon图标，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-03-03
Avue.js是基于现有的element-ui库进行的二次封装，简化一些繁琐的操作，核心理念为数据驱动视图,主要的组件库针对table表格和form表单场景，这篇文章给大家介绍了vue项目中使用AvueJs的相关知识，感兴趣的朋友跟随小编一起看看吧2022-10-10
这篇文章主要介绍了vue组件中使用props传递数据的实例详解,非常不错，具有参考借鉴价值，需要的朋友可以参考下2018-04-04
最近好几个vue项目都是用ivew作为UI框架,所以下面这篇文章主要给大家介绍了关于如何利用vue3 + threejs仿iView官网大波浪特效的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2021-12-12
这篇文章主要介绍了如何设置Vue全局公共方法，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-05-05
我们在做后台管理系统里面有非常多的表单需求,下面这篇文章主要给大家介绍了关于Vue如何获取表单数据的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2023-06-06
这篇文章主要为大家详细介绍了vue3.0实现考勤日历组件使用，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-08-08
最新评论