vue多页实践-nginx部署

最新推荐文章于 2024-08-02 15:55:29 发布
最新推荐文章于 2024-08-02 15:55:29 发布
阅读量993 收藏 3
点赞数
分类专栏： vue 文章标签： nginx vue.js github
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/mucuni/article/details/125125973
版权
本文详细介绍了在Windows系统上部署Vue多页应用到Nginx的实践过程，包括环境配置、单应用和多应用的打包部署策略，以及解决资源加载问题的方法。提供了解压缩后的Nginx配置文件位置和重启命令。此外，还提及了在实际项目中遇到的挑战和解决方案。
摘要由CSDN通过智能技术生成

本文为 vue多页实践-开发 的部署章节。

环境

  • 系统 win10
  • nginx-1.12.2

nginx

  • Nginx (engine x) 是一个高性能的HTTP和反向代理web服务器，同时也提供了IMAP/POP3/SMTP服务。
  • 本文采用 nginx win系统的安装包，直接在win上运行nginx与linux几乎无差异。
    • 链接：https://pan.baidu.com/s/1jyGdI_zT_LpLjHcUxK_jLw 提取码：ra4r
  • 下载后放到合适的目录解压文件无需安装。解压后如下图
  • 配置文件修改后需要重启nginx， ./nginx.exe -s reload （PowerShell 执行命令 或者git命令行）

image.png

最低0.47元/天 解锁文章
唐诗c
关注
专栏目录
nginx配置vue项目多个页面
a576837179的博客
12-03 1309
因项目要求，需要在本地起nginx服务。 先下载并解压nginx-1.18.0版本，接着npm run build打包项目，接着放在html文件夹内。配置nginx.conf，使用@router可以取到vue项目中的路由并切换访问。 server { listen 8806; server_name localhost; location / { root html; try_files $uri $uri/ @router; index index.html index.htm; }
nginx部署多个vue多页面项目
link750的博客
05-26 1680
众所周知，vue主要是用于开发单页应用的，在网上，也可以通过修改配置文件，实现多页面应用的开发，通过配置方式的开发多页面会有较多的缺点，在网上有许多论述，在此不再多言。此篇文章主要讲的是vue多页面的项目在nginx上部署，实现前后端分离，后台通过webapi和ajax的方式获取数据的方式。 1、 首先需要做的是在服务器上安装nginx服务器，个人使用的是Ubuntu20.4版本，这个网上的教程较多，不做过多介绍。 2、修改nginx的配置文件，在安装完成之后，输入nginx -v查看nginx服务的版本，
vue安装yang_Vue多页面nginx配置下的webpack配置
weixin_29698641的博客
02-22 189
package.json{"name": "Vue","version": "2.0.0","description": "","main": "index.js","directories": {"test": "webpack4+vue2"},"dependencies": {"animate.css": "^3.7.0","babel-preset-es2015": "^6.24.1","v...
nginx.conf配置示例：使用nginx部署多个vue前端项目的三种配置方式
最新发布
学亮编程手记
08-02 534
常见3种方法来实现在一台服务器上使用nginx部署多个前端项目的方法。
基于@vue-cli3的多页面应用改造及nignx配置
qq_32755637的博客
03-19 442
20200318 基于@vue-cli3的多页面应用改造及nignx配置 参考资料：https://www.jianshu.com/p/a7a742724e14 需求 一个项目型的工程。由于初期欠考虑的设计。做成了单页应用。现在项目越做越大.项目中多了许多原设计无法很好兼容的内容。这个工程原来的定位是预约审批系统的PC端，但是现在，这个工程包含着 1、预约审批功能PC端 2、审批功能钉钉H5页面 3、移动端问卷调查 4、访客账号的子账号管理功能 所以，打算将工程改造为多页应用。 修改步骤 修改目录结构 我们
nginx发布vue多页面程序
小道仙的后宫
04-23 2050
使用nginx发布多页面程序【vue的登陆页面和主页面】 第一步打包：npm run build (打包好的结构如下) 第二步配置：配置  nginx.conf location / { root /software/vue/dist; index index.html; ...
nginx部署多个vue项目的方法示例
10-14
在本文中，我们将深入探讨如何使用Nginx部署多个Vue.js项目。这通常在需要在同一域名下运行多个独立的应用程序时变得必要。我们将通过一个具体的示例来展示配置过程。 首先，我们的目标是在同一个域名下部署两个Vue...
Vue+vue-admin-template+nginx后台（Windows）部署
莫闲的专栏
09-29 2309
服务器环境： 电信服务器：有网环境，但是访问不了外网，只开放了几个特定的端口，可以进行mstsc远程（但必须外挂环境，你懂的），windows 2012 R2版本（因为Linux不太会，而且距机房太远，怕出问题） 系统： 1、springBoot后台，接口 9000 2、vue_admin_template项目，请求后台接口9000 本身接口8082（项目内已经配置完成，貌似是我自己想多了），打包就不讲了，按README.md说明来就行，但注意两点： a、将vue.config.js文件中的pu.
nginx 部署前端项目的详细步骤（vue项目build打包+nginx部署）_前端工程打包部署到nginx
2401_84437170的博客
04-28 518
server {# 自定义监听端口# 浏览器访问域名serverserverroot dist;
解决vue项目nginx部署到非根目录下刷新空白的问题
12-09
1、修改config/index.js 2、修改路由route/index ...以上这篇解决vue项目nginx部署到非根目录下刷新空白的问题就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持软件开发网。
nginx配置多个vue项目
awhlmcyn的博客
07-13 2507
1.该项目是基于cli2.0来做的 2.修改config---->index.js--->build 模块 build: { // Template for index.html index: path.resolve(__dirname, '../dist/index.html'), // Paths assetsRoot: path.res...
Vue 多页面程序在 Nginx 上部署，解决 Vue 路由404问题
qq_42496307的博客
07-13 1658
终于用Vue把项目的前端部分都做好了，平时用直接在本机跑的时候任何路由都是好好的。 但是把项目打包好部署的时候却发现… 原来事情并没有那么简单… 这是我打包后的目录结构 在Nginx上部署还要配置一下Nginx才行 首先，进入Nginx的配置 vi /usr/local/nginx/conf/nginx.conf 然后在里面加上下面两个 try_files 就好啦 其实我也不知道上面 loca...
实战 Vue 之配置多页面应用
热门推荐
杏子
07-02 1万+
最近一直在做企业钉钉应用开发，即每个功能模块都是一个单独的应用，单独的页面，配置到钉钉里面，就可以单独访问了。比如开发登陆模块的时候，会搭建一套环境，创建 login.html 以及相应的 js 和 css。再开发注册模块的时候，又搭建一套环境，创建 register.html 以及相应的 js 和 css。
nginx配置多个页面访问
whatevery的博客
11-25 3950
server { listen 80; server_name localhost; index index.html index.htm index.php; root /www/server/phpmyadmin; location ~ /tmp/ { return 403; } #error_page 404 /404.ht
vue多项目nginx部署
亱語的博客
08-11 1万+
一. 项目目的 1. 问题 实现服务端同一域名下部署多个vue项目。 2. 实例说明 kefu项目: https://www.test.com/kefu/... collect项目: https://www.test.com/collect/... lend项目:   https://www.test.com/lend/... 二. 客户端配置修改 1. index.h
使用nginx部署多个前端项目
qq_25983579的博客
05-23 2374
使用nginx部署多个前端项目 个人总结了3种方法来实现在一台服务器上使用nginx部署多个前端项目的方法。 基于域名配置 基于端口配置 基于location配置 基于域名配置 基于域名配置，前提是先配置好了域名解析。比如说你自己买了一个域名：www.fly.com。 然后你在后台配置了2个它的二级域名： a.fly.com、 b.fly.com。 配置文件如下： 配置 a.fly.com 的配置文件： server { listen 80; server_nam
nginx alias与root，vue多路由简洁配置
吴派三叔的博客
02-13 3086
nginx alias/root vue 简洁配置
【全部步骤+遇到的问题】多页面入口的Vue-Cli项目打包，配置到Linux系统下的 Nginx服务器 实战
黑夜的风的博客
07-26 1802
我的VUE-PHP全栈项目终于做好了，今天进行打包、上线。 这是我第一次发布Vue项目+部署Nginx服务器。 本文章将记载打包的步骤、遇到的问题等。以供将来参考。  1.首先什么也不配置，裸打包试试！   npm run build。直接执行打包，然后在webstorm里边运行（点击右上角的浏览器图标）。   发现首页空白。 2.配置打包路径，增加一个点.  （P.S：我的线上服务器...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值