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自定义全局组件实现弹框案例
这篇文章主要为大家详细介绍了vue自定义全局组件实现弹框案例，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-03-03
vue组件实现列表自动无限循环的方法
最近刚好有个功能需要实现列表的无限循环滚动,这篇文章主要给大家介绍了关于vue组件实现列表自动无限循环的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下
2023-11-11
element中使用formdata进行上传文件的方法
本文主要介绍了elementUI中使用formdata进行上传文件的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2023-03-03
Vue中XMLHttpRequest的使用方法详解
Vue中使用XMLHttpRequest（XHR）可以获取数据的方式与传统的HTML页面相同，本文主要来和大家讲讲它的正确使用方法，希望对大家有所帮助
2023-05-05
vue 使用Jade模板写html,stylus写css的方法
这篇文章主要介绍了vue 使用Jade模板写html，stylus写css的方法,文中还给大家提到了使用jade注意事项，需要的朋友可以参考下
2018-02-02
Vue中的局部组件介绍
这篇文章主要介绍了Vue中的局部组件，文章围绕Vue局部组件得相关资料展开内容，需要的的小孩伙伴请参考下面文章的具体介绍，希望对你有所帮助
2021-12-12
Vue安装sass-loader和node-sass版本匹配的报错问题
这篇文章主要介绍了Vue安装sass-loader和node-sass版本匹配的报错问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2024-04-04
proxy实现vue3数据双向绑定原理
这篇文章主要介绍了proxy实现vue3数据双向绑定原理,文章以介绍proxy的优点开始展开全文内容，围绕proxy实现vue3数据双向绑定的相关资料，,需要的朋友可以参考一下
2021-12-12
详解vuex数据传输的两种方式及this.$store undefined的解决办法
这篇文章主要介绍了vuex数据传输的两种方式及 this.$store undefined的解决办法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-08-08
Vue项目部署上线全过程记录(保姆级教程)
vue项目开发完毕后,我们需要将项目打包上线,同时我们希望可以在本地预览生产环境项目,下面这篇文章主要给大家介绍了关于Vue项目部署上线的相关资料,需要的朋友可以参考下
2023-03-03