前端项目打包、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阅读
从三个插件开始1、CommonsChunkPlugincommonsChunkPlugin 是webpack中的代码提取插件，可以分析代码中的引用关系然后根据所需的配置进行代码的提取到指定的文件中，常用的用法可以归为四类：（1）、提取node_modules中的模块到一个文件中；（2）、提取 webpack 的runtime代码到指定文件中；（3）、提取入口文件所引用的公共模块到指定文件中；（4）
前言Vue项目一般用于实现前端的单页面富应用，其打包后的文件可简单看作静态文件，所以可以通过Nginx部署，当然也可以通过django部署(毕竟本质上还是一个html文件及各CSS,JS文件的集合)。不过前后端的耦合性以及性能就比nginx动静分离的差一点。但平时开发的时候可以这样部署，十分方便快捷。测试所使用框架版本 django 3.06，VueCli 3.0Vue打包修改vue.config
转载
2024-07-31 15:43:45
33阅读
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阅读
# 如何将Vue项目打包部署到Nginx
## 简介
在开发完Vue项目后，需要将其打包并部署到生产环境中进行展示。Nginx是一个流行的Web服务器和反向代理服务器，可以帮助我们实现Vue项目的部署。
### 步骤概览
以下是将Vue项目打包部署到Nginx的整体步骤：
| 步骤 | 描述 |
| ------ | ------ |
| 1 | 打包Vue项目 |
| 2 | 部署Ngin
原创
2024-05-30 09:54:26
113阅读
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
前端每次打包完成项目后都需要连接服务器上传到指定文件夹，这样子很繁琐也很浪费摸鱼的时间，所以我根据学到的打包钩子突然奇想，利用package.json文件执行的脚本完成打包并自动部署一体化，我的思路是打包完成后压缩文件夹然后上传至服务器目录进行解压替换，我可能不是第一个想到这种方法的，但也是根据自己的思想总结出来的，整体实现如下。 每次打包都会执行npm run build 这个命
前端打包 http://doc.ruoyi.vip/ruoyi-vue/document/hjbs.html#%E5%90%8E%E7%AB%AF%E9%83%A8%E7%BD%B2 《环境部署》 http://doc.ruoyi.vip/ruoyi/document/hjbs.html#%E5%87%86%E5%A4%87%E5%B7%A5%E4%BD%9C 《Nginx配置》 http://d
转载
2024-08-14 22:01:14
739阅读
# 使用Dockerfile打包Vue项目并用Nginx进行部署
在现代web开发中，使用Docker打包和部署应用程序越来越普遍。尤其对于单页面应用（SPA）如Vue.js，这种方法能够极大地简化开发与上线的流程。本文将指导你如何使用Docker和Nginx打包并部署一个Vue.js应用程序。
## 第一部分：Vue.js项目概述
Vue.js是一款轻量级、高性能的JavaScript框架
原创
2024-10-10 05:20:53
487阅读
Vue3不用任何构建的原始HTML 导入vue.global.js，完成Hello vue!的显示<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"&
配置如下server { listen 80; server_name localhost; location / { root /app; index index.html; try_files $uri $uri/ /index.html; }}其中:/app 是网站根目录参考https://cli.vuejs.org/zh/guide/deployment.html...
原创
2021-07-12 10:20:12
2630阅读
对于前后端分离的项目，前端项目和后端项目需要单独部署，通常会使用SpringBoot框架开发后端项目，使用Vue框架开发前端项目；后端项目的部署较为简单，一般来说就是先打成一个Jar包上传到服务器，然后使用 nohup java -jar Jar包名 & 命令启动项目即可；完整部署流程可参考文章： 而对于前端Vue项目的部署，需要使用Nginx做反向代理，原因是开发的时候我们使用的是web
转载
2024-01-08 17:47:33
62阅读
首先准备两个vue项目 端口 例如：8080 8087 第一个正常打包即可 访问时只需要输入域名 www.xxx.com;第二个项目访问路径为www.xxx.com/bi;在第二个项目找到配置文件修改自己的虚拟访问路径ps:
baseUrl从 Vue CLI 3.3 起已弃用，请使用publicPath。增加请求前缀 然后修改路由r
转载
2023-08-03 13:31:48
352阅读
Nginx的安装与配置
Nginx官网下载所需版本安装 解压下载好的nginx修改nginx配置文件，配置文件为conf下的nginx.conf,修改nginx.conf中的server配置片段 里面的相关注释是在是太多了，那么我把所有的注释清除一下(这是方便看清nginx配置到底需要什么基础的配置)worker_processes 1; ##指明了nginx要开启的进程数
打包项目我们都知道 Nginx 是一个高性能的HTTP和反向代理服务器，所有就用它来做静态资源服务器和后端的反向代理服务器。我用到的应该是用它部署我们用Vue搭建的前端项目。打包前在打包之前需要对我们写的Vue项目做一点点修改，因为开发环境和生产环境是不一样的。这个应该是具体项目具体分析吧！打包的时候会有相应的文档说明书的！应该是~打包时在控制台的终端输入：npm run build
等这个命令执
原创
精选
2022-11-21 10:08:44
322阅读
使用Vue做前后端分离项目时，通常前端是单独部署，用户访问的也是前端项目地址，因此前端开发人员很有必要熟悉一下项目部署的流程与各类问题的解决办法了。 Vue项目打包部署本身不复杂，不过一些前端同学可能对服务器接触不多，部署过程中还是会遇到这样那样的问题。本文介绍一下使用nginx服务器代理前端项目的方法以及项目部署的相关问题，内容概览： 图片 一、准备工作——服务器和nginx使用准备一台服务器我
每个月一次的技术文档是一个总结的过程，今天就来讲讲我最近遇到的vue项目打包部署到服务端的注意事项及步骤。我们用vue-cli脚手架建一个项目之后，在本地测试都没有问题，但是直接用npm run build打包，访问基本都是有问题，比如：页面出现空白现象，获取资源路径不对等，我相信以VueJs为技术栈来进行前端开发的小伙伴或多或少都会遇到这样的问题，我也遇到过，那现在我们就来一一解决这样的问题。出
转载
2024-03-06 11:34:19
155阅读
一、vue-clivue-cli是由vue官方发布的快速构建vue单页面的脚手架。参见vue-cli官方网站。http://vuejs-templates.github.io/webpack/之前需要使用vue的单文件组件的功能，即将不同的模板分离到不同的.vue后缀的文件中，这样做需要使用webpack打包。参见官方说明：https://cn.vuejs.org/v2/guide/single-
一. vue前端项目打包 使用vscode开发项目 ，在src的同级目录下创建一个vue.config.js文件（已有的话则修改相应内容），向其中写入配置信息并保存：module.exports = {
publicPath: './',
outputDir: 'dist',
assetsDir: 'static'
}module.exports = {
// 基本路径 baseUR
转载
2024-04-15 13:36:02
1618阅读
