前端vue项目部署到生产环境(包括nginx安装及配置)

已于 2023-02-22 10:29:07 修改
阅读量1.8k 收藏 1
点赞数
分类专栏： Vue 前端 文章标签： vue.js 前端 nginx
于 2022-12-13 13:00:25 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_34569497/article/details/128300179
版权

一.vue3项目打包

vue3项目 使用vue-cli创建的，使用npm run build打包到dist

二.在服务器上安装nginx

1.去nginx的官网下载windows版本的nginx，下载地址：nginx: download

最好安装稳定版，下载完成后解压nginx压缩包：

最低0.47元/天 解锁文章
Jyann~
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue前端项目部署之nginx配置.md
03-20
vue前端项目部署之nginx配置。
web服务器nginx+部署前端vue项目
03-22
1. 什么是 nginx 和可以做什么事情 Nginx 是高性能的 HTTP 和反向代理的web服务器，处理高并发能力是十分强大的，能经受高负 载的考验,有报告表明能支持高达 50,000 个并发连接数。 其特点是占有内存少，并发能力强，事实上nginx的并发能力确实在同类型的网页服务器中表现较好，中国大陆使用nginx网站用户有：百度、京东、新浪、网易、腾讯、淘宝等。 2.Nginx 作为 web 服务器 Nginx 可以作为静态页面的 web 服务器，同时还支持 CGI 协议的动态语言，比如 perl、php 等。但是不支持 java。Java 程序只能通过与 tomcat 配合完成。Nginx 专为性能优化而开发， 性能是其最重要的考量,实现上非常注重效率 ，能经受高负载的考验,有报告表明能支持高 达 50,000 个并发连接数。 https://lnmp.org/nginx.html
nginx部署vue项目及nginx配置_vue nginx 项目路径，Linux运维常见面试题及答案
最新发布
m0_60707660的博客
04-06 421
鸿蒙、计算机网络、嵌入式物联网、软件测试、数据结构与算法、音视频开发、Flutter、IOS开发、PHP开发、.NET、安卓逆向、云计算**#当项目的vue-router使用history模式时，刷新界面会空白，或使用有参数的url时候会找不到地址，#当项目的vue-router使用history模式时，刷新界面会空白，或使用有参数的url时候会找不到地址，#例如：user/getByid/1 ,使用hash模式无此问题。#例如：user/getByid/1 ,使用hash模式无此问题。
nginx 部署 vue 项目找不到js css文件的解决方法
09-29
主要介绍了nginx 部署 vue 项目找不到js css文件的解决方法，本文给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
详解vue-cli3多环境打包配置
10-17
主要介绍了vue-cli3多环境打包配置，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
vue项目打包部署生产环境
weixin_30593443的博客
05-16 3378
vue项目打包部署生产环境 打包部署生产环境之前需要修改配置文件： 修改一：build > utils.js(修改publicPath:"../../" , 这样写是处理打包后找不到静态文件的问题) 修改二：config > index.js(修改assetsPublicPath:'./',修改目的是为了解决js找不到的问题) 两个文件修改完成之后，运行命令：n...
Vue3 开发环境和生产环境打包配置
weixin_64310738的博客
01-17 7654
Vue3打包环境配置
【Vue3实践】（六）Vue3使用vite处理环境变量、打包部署、nginx配置
热门推荐
积木成林，聚沙成塔
03-28 1万+
本篇的主要内容是Vite中环境变量的使用以及打包部署，包含以下关键点： - 环境变量 -通过`.env`文件来划分环境，命名规则为`.env.[mode]` - `vite`指令的默认mode为`development`，`vite build`的默认mode为`production`，可以根据这个默认值来命名 - `.env`文件也可以不加mode，这样的文件在任何情况下都可以被引用，但是优先级低于有`[mode]`的文件 - 如果想让客户端直接使用，`.env`文件中的变量名应该以`VITE_
VUE3-设置多人协作开发环境和生产环境Nginx部署
扬雨于今
07-20 519
开发环境中，通常使用vue-cli脚手架或者vite方式进行管理，且通常情况下，开发环境往往有多个用户协作开发，每个人的环境参数（常用的如IP、端口等）各有差异，此时最便捷的方式是各自维护自用的配置文件，互不影响，否则会在git提交代码时配置文件相互覆盖或冲突。通常使用vue开发的前端，是与后端分离的，需要通过代理的方式将流量转发给后端服务器。在开发环境中，这一功能通常是配置在诸如vite.config.js等文件中，对于生产环境，此代理功能可由nginx实现。.env.hanmm文件。
vue3+vite+ts项目配置开发环境和生产环境 打包命令配置
码农键盘上的梦
06-20 8980
开发环境和生产环境的配置和打包方式有所不同，下面是基于vue3+vite+ts项目的开发环境和生产环境配置及打包方式的详细说明。打包完成后会在项目根目录下生成dist目录，里面包含了打包后的静态文件和index.html文件，可以直接部署到服务器上。这里配置了三个命令，分别是开发环境启动命令、开发环境打包命令和生产环境打包命令。1.3 配置.env.development。2.2 配置.env.production。1.2 配置vite.config.ts。2.1 配置vite.config.ts。
Vite4 + Vue3 项目打包并发布Nginx服务器 (前端必看)
Etc.End的博客
03-26 1万+
这里因为我们有的小伙伴可能不太需要服务器，单纯学习的话也没有必要去买一个服务器。如果需要把自己的东西部署到公网上，有很多方式，自行百度。你也可以购买阿里云或者腾讯云。逻辑都是一样的，我这里使用的虚拟机+centos系统，我已经提前在自己的机器安装好了。感兴趣的小伙伴可以看我专栏。里面有从虚拟机、centos到一些开发工具的详细安装步骤。特别是我们这篇文章中要用到的nginx服务器。
解决vue项目nginx部署到非根目录下刷新空白的问题
12-09
1、修改config/index.js 2、修改路由route/index ...以上这篇解决vue项目nginx部署到非根目录下刷新空白的问题就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持软件开发网。
【02Vue3 项目打包教程】Vue3 项目打包教程创建 Vue3 项目开发和构建项目查看打包结果
燃正科技
06-08 3998
首先，确保你的计算机上已安装最新版本的 Node.js。你可以在下载并安装 Node.js。
vue打包到生产环境
heshihu2019的博客
07-04 1320
npm run build 是生产环境。npm run dev 是开发环境,此时会自动打包在dist目录下。
Vue3.0进行开发环境、测试环境和生产环境配置
Upward Force的博客
02-19 4882
一、在 package.json 中配置打包命令 配置前 配置后 运行 npm run serve => 启动项目并自动打开浏览器 “serve”: “vue-cli-service serve --open” 运行 npm run dev 打包开发环境包 “dev”: “vue-cli-service build --mode development” 运行 npm run test 打包测试环境包 “test”: “vue-cli-service build --mode test”
Vue cli3配置生产环境，开发环境，和测试环境
tsang荒男的博客
05-07 3745
通过不同命令行切换不同环境api等信息 例如： npm run serve调用本地环境api npm run test 调用测试环境api npm run build 调用线上环境api 1、先在package.json文件中添加： "test": "vue-cli-service build --mode test" 知识点补充： 参数的名字可以根据跟人喜好来定义 vue cli 3 se...
多个vue项目生产环境下NGINX配置文件
MingT 明天你好！的博客
03-04 3048
主要解决多个vue项目在nginx中的配置
vue3中多环境配置打包
猫老板的豆
08-26 1834
vue多环境配置及打包 env.development（开发环境） .env.production（生产环境） .env.test（测试环境）
第五篇 部署Vue3开发的项目
qq_38519364的博客
06-29 2249
完成vue3项目的开发之后，通过本地环境测试，后面就是生产环境的部署发布了，本文简单说明一下，如何在生产环境发布vue3的项目。
将前端vue项目部署到nginx服务器
06-06
将前端 Vue 项目部署到 Nginx 服务器，可以按照以下步骤进行： 1. 构建项目：在本地开发环境中，进入 Vue 项目的根目录，执行以下命令进行构建： ``` npm run build ``` 这个命令会在项目的 `dist` 目录下生成一...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值