Vue打包上线流程，Ngnix服务器配置

最新推荐文章于 2023-02-24 13:39:25 发布
最新推荐文章于 2023-02-24 13:39:25 发布
阅读量322 收藏
点赞数 2
文章标签： nginx
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_57750091/article/details/117686386
版权

Ngnix

使用Ngnix上线

1.首先需要安装nginx
下载地址：(http://nginx.org/en/download.html)
（Nginx官网）
在这里插入图片描述
2.当我们安装好Nginx，我们就可以操作上线流程了，我们先将我们的项目打包完毕，具体怎样打包，请看详情
打包优化

既然说到打包我们又不得不提多环境变量，我们在打包前，这是必要做的事情，详情如下
多环境变量

启动Nginx

控制台（CMD）切换到Nginx目录下，输入start nginx ，然后在浏览器页面输入localhost，出现如下界面则表示安装成功。默认监听80端口号。

最低0.47元/天 解锁文章
郭郭郭牧鑫
关注
  • 2
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue项目使用nginx部署
coderxsj
06-03 832
下载安装nginx。 http://nginx.org/en/download.html。安装之后的目录结构如下图所示： 打包vue项目： 在项目的目录下运行npm run build命令进行打包。会生成一个dist文件夹，即为打包的结果。 修改nginx的配置文件 配置文件为config目录下的nginx.conf文件（或者为.conf文件）.修改其中的server部分。其中listen 后为监听的端口好，root为dist文件夹的路径。如果将dist文件移动，就需要修改这个路径。每次修改配置..
如何构建一个vue登录系统之登录页面
m0_37922443的博客
11-13 4181
构建一个vue登录系统之登录页面
Nginx 打包上线 nginx.conf文件配置
路虽远行则将至，事虽难做则必成。
12-03 1316
打包上线其实就是，我们有一个服务器绑定了域名，然后在通过Nginx部署代码，这样就可以域名访问项目。在打包上线之前我们应该知道，开发常见的三种环境，本地环境，生产环境，测试环境。参考文章参考文章NginxNginx官网下载Nginx中文网Nginx配置中文参考手册实际应用1.我们现在实际情况是一个服务器绑定域名，只放一个项目的情况下。通过Nginx部署，域名进行访问项目。2.我们进行项目生产环境打包，在打包之后我们可以理解为Nginx的nginx.conf文件就相当于了我们本地开发环境的vue.config
vue项目最强打包,上线(nginx)
m0_51328823的博客
01-14 1731
项目打包 我通常会在项目根目录创建vue.config.js去修改webpack配置。项目开发完成后，运行npm run build进行打包操作。 目的： 减小项目体积、提高首屏加载速度 提高用户体验 ????修改publicPath 首先我们要修改publicPath，防止项目打包后出现白屏 module.exports = { publicPath: './', // 静态资源路径（默认/，打包后会白屏） outputDir: 'dist', // 打包后文件的目录 （默认为dist）
nginx 作为vue项目服务器简单配置
zuidenaoshi的专栏
02-24 1735
nginx 作为web服务器，以及一个前端对应多个后端基本配置。
Vue项目打包部署到iis服务器的配置方法
10-16
主要介绍了Vue项目打包部署到iis服务器的配置方法，文中通过代码示例给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
Electron + vue 打包桌面操作流程详解
10-16
集成Vue和Electron的过程涉及到多个步骤，包括安装依赖、整合项目结构、配置文件的修改以及最后的打包。理解这些步骤对于成功创建桌面应用至关重要。如果你在过程中遇到任何问题，记得查阅文档或在线寻求帮助。记住...
vue打包之后生成一个配置文件修改接口的方法
10-17
主要介绍了vue打包之后生成一个配置文件修改接口 的相关资料,本文分步骤给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
如何修改Vue打包后文件的接口地址配置的方法
10-15
主要介绍了如何修改Vue打包后文件的接口地址配置的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
vue打包上线流程，ngnix服务器配置
weixin_48456818的博客
06-07 253
在项目打包之前，我们一般都会对项目进行打包优化 打包优化的流程：项目打包优化
nginx rewrite语法格式
weixin_34054866的博客
09-02 275
rewrite语法格式及参数语法说明如下:     rewrite    <regex>    <replacement>    [flag];     关键字      正则        替代内容          flag标记       关键字：其中关键字error_log不能改变     正则：perl兼容正则表达式语句进行规则匹配     替代内...
记录一次vue-cli项目上线到阿里云并配置Nginx服务器的经历
Dancy的博客......
09-27 8911
首先，买一台云服务器是必要的，我使用的是阿里云服务器CentOS 7.4 64位操作系统。 在整个vue-cli项目上线过程中，我遇到了很多问题。不过，最终圆满解决了，因此在这里记录一下。 遇到的问题： 云服务器连接 vue项目打包上线 nginx安装配置 云服务器node的安装 本地json数据无法访问 vue路由页面无法访问 一、使用Xshell连接云服务器 百度下载一个Xshell并安...
前端Vue项目使用Nginx部署上线
yokimiya
06-22 1360
1.npm run build打包 2.生成的dist文件最好放在英文路径下 3.配置nginx vue官方文档 将此代码块放在nginx配置中进行修改 location / { root /app; index index.html; try_files $uri $uri/ /index.html; } nginx配置如下 5.启动nginx start nginx --启动 nginx -s reload --重启 nginx -
Nginx部署Vue项目完整配置
白不懂黑的静的专栏
04-16 3864
下面是一个在实际应用中的实际的Nginx部署vue项目的nginx.conf的配置文件，记录在此。 #user nobody; worker_processes 1; #error_log logs/error.log; #error_log logs/error.log notice; #error_log logs/error.log info; #pid logs/nginx.pid; events { worker_connections 1024
nginx部署访问vue-cli搭建的项目
草灯的专栏
08-07 1万+
从vue-router官网了解到如果是用history模式构建的vue项目打包后是需要后端配置支持的，而hash是不需要的，只不过地址会多了一个#/的后缀。使用hash模式构建的项目打包后，我只需要使用webstorm之类的软件打开访问就能成功了。         但是我用history模式构建的项目需要借助后台技术，我这里选用的是nginx反向代理来部署项目。具体做法如下：
使用nginx反向代理实现vue项目打包部署上线
热门推荐
yw00yw的博客
02-28 1万+
在开发完成vue项目的时候，面临的问题就是打包部署。 打包很简单，只需要执行npm run build命令即可。 但是部署的时候需要使用nginx做反向代理，因为开发的时候我们使用的是webpack提供的proxyTable做的代理从而解决了开发环境的跨域请求问题。 使用nginx反向代理 根据前面写到的下载安装nginx服务器 配置nginx server { listen ...
vue打包上线流程，Nginx的安装
weixin_54167313的博客
06-07 211
简单介绍 Nginx 是一款自由的、开源的、高性能的HTTP服务器和反向代理服务器，同时也是一个IMAP、POP3、SMTP代理服务器。Nginx可以作为一个HTTP服务器进行网站的发布处理，另外Nginx可以作为反向代理进行负载均衡的实现。 安装步骤 下载Nginx 下载地址：http://nginx.org/en/download.html （Nginx官网） 2、下载之后，解压到指定的目录，就可以看到以下的目录 3、控制台（CMD）切换到Nginx目录下，输入start nginx ，然后
vue 打包上线 vue-cli配置反向代理
最新发布
08-09
要在Vue项目中配置反向代理，首先需要使用Vue CLI进行打包。Vue CLI是一个用于快速搭建Vue项目的工具，它提供了一些默认的配置文件和命令。以下是步骤： 1. 安装Vue CLI：通过npm全局安装Vue CLI的最新版本，命令是 `npm install -g @vue/cli` 2. 创建Vue项目：使用Vue CLI创建一个新的Vue项目，命令是 `vue create project-name`，其中project-name是你想要给项目起的名字。 3. 安装依赖：进入项目目录，运行 `npm install` 安装项目所需的依赖包。 4. 配置反向代理：在项目根目录中找到vue.config.js文件，如果没有就手动创建一个。在vue.config.js文件中添加以下代码： ```javascript module.exports = { devServer: { proxy: { '/api': { target: 'http://localhost:3000', // 目标服务器地址 ws: true, changeOrigin: true }, '/foo': { target: 'http://localhost:8080', ws: true, changeOrigin: true } } } } ``` 上述配置的意义是将以`/api`开头的请求代理到`http://localhost:3000`上，将以`/foo`开头的请求代理到`http://localhost:8080`上。你可以根据实际需求调整配置。 5. 重新启动项目：运行`npm run serve`重新启动项目，在开发环境中进行测试，代理请求会被转发到目标服务器。 6. 打包上线：当项目开发完成后，可以通过运行`npm run build`来进行项目打包。打包完成后，将生成的dist目录中的文件部署到服务器上即可实现项目的上线。 以上就是使用Vue CLI配置反向代理的步骤。通过反向代理，我们可以在开发环境中轻松模拟后端接口，便于前端开发与后端接口的对接工作。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值