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打包部署内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • Java结合Vue项目打包并进行服务器部署

    Java结合Vue项目打包并进行服务器部署

    目录 Java后端项目打包和服务器部署 Vue项目服务器部署 两周前我刚刚入职实习的时候,后端的几个同事看到我需要学习如何把项目进行部署,都围过来教我怎么部署,我感觉学习到了很多,因此,记录一下学习的笔记.当然了,这些部署是建立在已经配置好tomcat(后端服务器)和nginx(前端服务器)的基础之上的,因为公司之前已经做好了,我只需要迭代即可. Java后端项目打包和服务器部署 1.IDEA点击maven,然后点击clean,接着点击package打包获得cr.war(在项目根目录的targe

  • Vue项目打包部署的实战过程记录

    Vue项目打包部署的实战过程记录

    目录 前言 一.准备工作--服务器和nginx使用 1. 准备一台服务器 2. nginx安装和启动 3. 了解nginx: 修改nginx配置,让nginx服务器代理我们创建的文件 二.Vue项目打包同步文件到远程服务器 1. 打包 2. 同步到远程服务器 3. 同步ssh key 三.非域名根路径发布 1. nginx配置 2. 项目配置 3. 绝对路径引用的静态资源找不到的问题 四.history模式部署 1. 项目配置 2. nginx配置 3. history模式部署到非域名根路径下

  • vue项目打包之开发环境和部署环境的实现

    项目开发阶段和生产环境可能不一样 如前端在开发阶段,接口可能是自己使用 node.js 搭建的服务器,API 返回的也都是假数据,等后台接口开发好后,再切换成后台提供的接口,等测试没有问题,服务端上线后,又要改成正式的接口 手动改动接口,既繁琐又容易出错(当然,区别还不止这些) 优雅的解决方案是,分别使用两个入口文件,一个用于开发环境打包,一个用于生产环境打包 具体来说,分为下面几个步骤 1.创建入口文件 在 src 目录下新建 prod_env.js 和 dev.env.js 将main.js

  • Vue项目打包部署到apache服务器的方法步骤

    Vue项目打包部署到apache服务器的方法步骤

    vue项目在开发环境下,让项目运行起来,是通过npm run dev命令,原理是在本地搭建了一个express服务器. 但是在服务器上就不是这样的,必须要通npm run build命令来对整个项目进行打包,打包后会在项目目录下生成一个dist文件夹,内容如下: 然后就是把这些文件丢到服务器上的某个文件夹下,我这里的文件夹名字是ibms 遇到的问题: 1. 直接去访问http://www.xxx.com/ibms/,会发现网页是白屏的,什么都没有,这就比较奇怪了,其实是因为资源加载的路径有问题!

  • Vue中跨域及打包部署到nginx跨域设置方法

    众所周知,我们在做前后端分离项目的时候,经常需要在本地起前端工程,接口希望拉取服务端的实际数据而不是本地的mock数据,而如果本地程序直接访问远程接口, 肯定会遇到跨域问题. 什么是跨域?实现跨域的多种方式? 这里我就不详细介绍了,大家自行百度哈 为什么要实现前端跨域 一般来讲,前后端分离的项目在大公司都会由后台设置允许跨域访问,因为后台设置允许跨域是很简单和方便的,但是某些情况下,一些小公司或者你工作的场所后台不怎么配合的情况下,这就需要前端来配置跨域请求来方便我们使用接口 vue项目中的配置

  • Vue中的项目打包及部署全流程

    Vue中的项目打包及部署全流程

    目录 一.打包 遇到的第一个问题 问题二:文件找不到 二.服务器部署 1.解压 2.用法 3.Vue项目build后 4.配置nginx 正式开始将项目推送到自己服务器上 CentOS操作系统的部署 一.打包 npm run build 打包项目后,出现dist文件夹,dist文件夹下的东西就是需要部署的项目. 遇到的第一个问题 index.html页面出现一片空白,右键检查network发现一堆错误. 解决:没有修改config配置文件,如果直接打包,系统默认的是’/’(根目录),而不是’./

  • 浅谈Vue 自动化部署打包上线

    应用场景 项目打包后发布到正式环境,需要后端配合或者前端自己上传到服务器上,操作不便且容易产生问题,比如后台不在的情况而前台没有服务器的信息,这时发布就被延:或者前端自己上传容易导致误操作,如果上传错地方没正确上传都可能导致线上直接崩掉,而这对于已发布的产品而言是致命的.因此,有必要实现自动化部署代码到线上,解放双手的同时也减轻后端兄弟的压力. 项目使用 1.在项目根目录下, 创建 deploy/products.js 文件 /* *读取env环境变量 */ const SERVER_ID =

  • vue项目打包部署流程分析

    目录 一.打包 二.部署 三.部署多个项目 一.打包 (可选)去除打包后会生成的map文件:在vue.config.js中添加productionSourceMap: false, map文件作用:项目打包后,代码都是经过压缩加密的,如果运行时报错,输出的错误信息无法准确得知是哪里的代码报错.map文件可以准确输出报错位置. 项目终端运行npm run build,出现的dist文件即为打包后的文件 二.部署 xshell连接服务器(此处服务器为centos7) 利用xfp在服务器/root目录

  • Vue项目打包部署到iis服务器的配置方法

    Vue项目打包部署到iis服务器的配置方法

    一 将Vue项目打包 切换到项目目录下,输入cnpm run build 打包 等待打包完成 二 URL 重写 访问我们的一个url 原因是vue不是根据项目目录的地址访问的,是根据vue-router转发路由访问url,在这里我们应该进行url rewrite url write的方式有两种,一种是在iis下载url rewrite工具配置规则 另一种是配置web.config文件,我用的是第二种 web.config内容 <?xml version="1.0" encodin

  • vue项目打包部署_nginx代理访问方法详解

    我又来了,今天部署了下vue项目,使用nginx做了代理,这样可以解决跨域的问题,这里做一个简单讲解. 1.先看vue项目打包(我这里使用的是vscode开发工具) 这里是我的项目结构: 打包之前需要修改如下配置文件: 配置文件一:build>>utils.js (修改publicPath:"../../" , 这样写是处理打包后找不到静态文件的问题) 配置文件二:config>>index.js(修改assetsPublicPath:'./' ,修改目的是为了

  • Vue项目打包部署到GitHub Pages的实现步骤

    Vue项目打包部署到GitHub Pages的实现步骤

    目录 前言 前期准备 重要说明 步骤1 步骤2 步骤3 步骤4 步骤5 步骤6 前言 关于什么是github pages?怎样创建github 仓库上传本地项目到GitHub远程仓库?等基本操作本文不再赘述,初学者可以通过搜索找到大量文章教程.本文重点在于: 如何将vue项目源码(含dist目录)同步到到github仓库,同时单独将项目下的dist目录同步到gh-pages分支以便使用GitHub pages 发布和预览静态网页. 针对以上问题,作者以往的做法是将Vue项目源码托管到源码仓库,然

  • vue项目打包部署到服务器的方法示例

    vue项目打包部署到服务器的方法示例

    上上一篇我写过一些关于vue项目部署到linux服务器的文章,但是那是以node作为开发环境 pm2 守护进程的方式,让他能正常运行,可是还是出现了问题,因为属于与APP交互的页面,在webView中打开过慢,APP的用户体验非常的差,所以我查找了资料,改变了部署方式,接下来我介绍一下 这一次,我想Tomcat为例 我们先看一下Linux中 Tomcat下面的目录结构: 以vue-cli 搭建出来的手脚架 webpack的模板下的/config/index.js,这里可以看到assetsPubl

  • vue项目打包部署后默认路由不正确的解决方案

    vue项目打包部署后默认路由不正确的解决方案

    目录 打包部署后默认路由不正确 问题描述 解决方案 vue打包后路径不对 对于背景图片不显示的问题 动画无法运行 小图标没了 打包部署后默认路由不正确 问题描述 vue项目本地开发的时候默认路由没问题,例如 redirect:"/index" 但是部署以后,服务器上默认路由不正确,现在遇到的问题是,会默认跳转到login页面,前提项目没有做路由权限. 解决方案 打开路由index.js文件,添加:base:"/" const routers = new Router

  • Vue项目打包并部署nginx服务器的详细步骤

    Vue项目打包并部署nginx服务器的详细步骤

    目录 使用场景: 一.打包 二.部署(nginx) 总结 使用场景: 我们常使用前后端分离项目时,会需要将前端vue打包然后部署. 一.打包 vue项目其实可以直接通过一下语句进行打包: npm run build 默认打包情况如下: 当我们需要将打包名称以及静态资源位置进行修改时便需要进行相应的配置: 1.首先在项目根目录下创建vue.config.js文件 配置内容如下所示(附带跨域问题解决): module.exports = { //打包 publicPath: './', output

随机推荐