# 如何将Vue项目打包部署到Nginx
## 简介
在开发完Vue项目后，需要将其打包并部署到生产环境中进行展示。Nginx是一个流行的Web服务器和反向代理服务器，可以帮助我们实现Vue项目的部署。
### 步骤概览
以下是将Vue项目打包部署到Nginx的整体步骤：
| 步骤 | 描述 |
| ------ | ------ |
| 1 | 打包Vue项目 |
| 2 | 部署Ngin
原创
2024-05-30 09:54:26
113阅读
每个月一次的技术文档是一个总结的过程，今天就来讲讲我最近遇到的vue项目打包部署到服务端的注意事项及步骤。我们用vue-cli脚手架建一个项目之后，在本地测试都没有问题，但是直接用npm run build打包，访问基本都是有问题，比如：页面出现空白现象，获取资源路径不对等，我相信以VueJs为技术栈来进行前端开发的小伙伴或多或少都会遇到这样的问题，我也遇到过，那现在我们就来一一解决这样的问题。出
转载
2024-03-06 11:34:19
155阅读
前言Vue项目一般用于实现前端的单页面富应用，其打包后的文件可简单看作静态文件，所以可以通过Nginx部署，当然也可以通过django部署(毕竟本质上还是一个html文件及各CSS,JS文件的集合)。不过前后端的耦合性以及性能就比nginx动静分离的差一点。但平时开发的时候可以这样部署，十分方便快捷。测试所使用框架版本 django 3.06，VueCli 3.0Vue打包修改vue.config
转载
2024-07-31 15:43:45
33阅读
前端项目打包、Nginx的启动暂停、Nginx配置1、前端打包首先配置前端环境.env.preview文件中VUE_APP_API_BASE_URL指向后端地址之后，使用命令 yarn run build 打包后前端根目录出现dict文件夹yarn run build 或者 npm run build使用Nginx代理部署前端 -配置内容server {
listen
转载
2024-06-10 10:23:27
1555阅读
对于前后端分离的项目，前端项目和后端项目需要单独部署，通常会使用SpringBoot框架开发后端项目，使用Vue框架开发前端项目；后端项目的部署较为简单，一般来说就是先打成一个Jar包上传到服务器，然后使用 nohup java -jar Jar包名 & 命令启动项目即可；完整部署流程可参考文章： 而对于前端Vue项目的部署，需要使用Nginx做反向代理，原因是开发的时候我们使用的是web
转载
2024-01-08 17:47:33
62阅读
作为一名经验丰富的开发者，我将向你介绍如何将Vue应用部署到Nginx服务器上。首先，让我们了解一下整个部署的流程。我们将分为以下步骤进行部署：
| 步骤 | 操作 |
|------|-------------------------------|
| 1 | 构建Vue应用 |
| 2 | 配
原创
2024-05-24 11:01:49
20阅读
从三个插件开始1、CommonsChunkPlugincommonsChunkPlugin 是webpack中的代码提取插件，可以分析代码中的引用关系然后根据所需的配置进行代码的提取到指定的文件中，常用的用法可以归为四类：（1）、提取node_modules中的模块到一个文件中；（2）、提取 webpack 的runtime代码到指定文件中；（3）、提取入口文件所引用的公共模块到指定文件中；（4）
第一步：在build/utils/webpack.prod.conf.js 中的output中添加一条 publicPath:’./’在build/utils/webpack.prod.conf.js 中的output中添加一条 publicPath:’./'如果有则继续往下走，come on！！！ 没有的话看第二步 Vue-cli3.0文件配置Vue-cli3.0没有config文件，需要自己在
转载
2023-09-09 23:03:49
108阅读
今天有时间分享一些平时自己开发上的一些构建配置，我们以Vue-CLI-2.x来构建开发环境。 好，我们先来看一下我们要做哪些工作。 现附上源码地址，https://github.com/749264345/Vue-CLI-2.x1.Vue,Vuex,vue-router,axios通过CDN引入；优化打包后文件过大的问题 2.开发环境区分开发，测试，生产；提高开发效率 3.打包区分测试与生产 4.
转载
2024-01-05 22:30:22
160阅读
一. vue前端项目打包 使用vscode开发项目 ，在src的同级目录下创建一个vue.config.js文件（已有的话则修改相应内容），向其中写入配置信息并保存：module.exports = {
publicPath: './',
outputDir: 'dist',
assetsDir: 'static'
}module.exports = {
// 基本路径 baseUR
转载
2024-04-15 13:36:02
1618阅读
open /usr/local/etc/nginx/成功打开nginx目录，也可以看到如info所说servers目录以及nginx.conf的配置文件（后面会用到这个配置文件）。但我们并没有找到nginx被安装到了哪里。终端继续执行：open /usr/local/Cellar/nginx //其实这个才是nginx被安装到的目录会看到一个以当前安装的nginx的版本号为名称的文件夹，这个就是我
转载
2024-08-07 15:18:35
987阅读
Vue.js 是一款用于构建 Web 界面的渐进式框架，由于其高效、灵活、易用等优点，已经成为前端开发的热门选择之一。在开发 Vue 项目后，通常需要将其部署到服务器上进行线上访问，而 Nginx 作为一个高性能的 Web 服务器，也是常用的部署工具之一。下面就是 Vue 项目在 Nginx 服务器上部署的详细教程。前提条件在进行部署之前，需要确保满足以下条件：已经开启服务器的 Nginx 服务。
转载
2024-03-04 15:15:45
102阅读
下载配置nginx服务器由于项目的需求，把项目部署到nginx服务器上面。首先要现在并配置nginx，这里我看的是菜鸟教程的过程链接: 点这. 2. 但是你需要先配置linux系统，这里我采用的是虚拟机的方式–VM。也就说你要要先下载VM（vmware workstation），在下载配置linux,linux 系统我选的是centos7。这一步可以自行百度。 3. 接下来就是按照菜鸟的教程。 这
转载
2024-05-22 14:42:14
163阅读
Vue项目部署到Nginx服务-温馨版 文章目录Vue项目部署到Nginx服务-温馨版1.概述2.搭建Nginx服务2.1.下载Nginx包2.2.配置Nginx编译环境1.安装gcc2.安装PCRE pcre-devel3.安装zlib4.安装Open SSL2.3.编译Nginx二进制包1.解压Nginx包2.生成Makefile文件3.编译安装nginx2.4.Nginx常用命令1.启动Ng
转载
2024-06-06 17:33:54
364阅读
1.下载nginx 首先需要在服务器里下载nginx apt-get install nginx2.检查安装情况 检查nginx是否安装，输入如下命令后若出现版本号则安装成功 nginx -v3.启动nginx 有两种启动方式 ①server nginx restart ②在nginx的目录去启动 比如我的nginx装在 /home/xyx/Desktop/nginx 则输入nginx -c /h
转载
2024-02-19 01:39:44
136阅读
1、安装nginx2、打包vue项目npm run build生成3、配置nginx location
原创
2023-02-22 10:50:38
265阅读
目录一丶前言二、安装nginx1.准备nginx2.服务器上传nginx3.解压nginx 4.安装相关依赖库5.编译nginx6.启动nginx7.访问nginx 8.安装成系统服务三、安装Tomcat1.安装JDK（如果安装并配置环境变量了可以略过）2.准备Tomcat3.服务器上传tomcat4.解压tomcat 5.启动tomcat6.访问tomcat7.设置
Vue项目打包部署nginx是一个常见的操作，它可以帮助我们将Vue项目打包成静态文件，并通过nginx服务器进行部署，实现项目的发布和访问。在这篇文章中，我将教你如何完成这个过程。
首先，让我们通过以下步骤来了解整个过程：
| 步骤 | 操作 |
| ------ | ----------------
原创
2024-04-26 11:09:50
85阅读
原因：打包后的dist没有放到服务器的根目录下。解决方案：vue-cli官方文件给出的方法如下默认情况下，Vue CLI 会假设你的应用是被部署在一个域名的根路径上，例如 https://www.my-app.com/。如果应用被部署在一个子路径上，你就需要用这个选项指定这个子路径。例如，如果你的应用被部署在 https://www.my-app.com/my-app/，则设置 publicPat
最近公司把云平台产品用vue 前后端分离的框架来写，前面大部分开发都比较顺利，后面打包部署出了bug 现在记录下自己遇到的哪些坑 1，我直接npm run build 打包出来，打开dist目录下面的index.html 空白页，页面上出现 no "NODE ENV"是我打包时没有指定打包到哪个环境
转载
2018-07-06 15:14:00
302阅读
