vue项目部署在子路径中前端配置

懒洋洋懒羊羊

于 2024-08-06 15:03:04 发布

阅读量177

点赞数 1

文章标签：前端 vue.js javascript

本文链接：https://blog.csdn.net/m0_45827438/article/details/140956285

版权

vue.config.JS

router/index.js或者是man.js

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

懒洋洋懒羊羊

关注关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue项目部署在子路径中前端配置

router/index.js或者是man.js。
复制链接

扫一扫

vue前端项目部署之nginx配置.md

03-20

### Vue前端项目部署之Nginx配置详解 #### 一、引言随着前端技术的发展，Vue.js作为一款流行的前端框架被广泛应用于Web应用开发之中。对于开发者来说，如何将开发完成的应用部署到生产环境是必不可少的一环。本文...

Vue项目服务器部署之子目录部署方法

10-17

当需要将Vue项目部署到子目录时，有以下几个关键步骤： 1. **设置homepage**：在`poi.config.js`或`package.json`中，需要将`homepage`字段设置为子目录的路径。例如，如果子目录是`/ticket/`，那么`homepage`应设...

参与评论您还未登录，请先登录后发表或查看评论

vue项目部署到子路径下需要更改的设置

qq_35875316的博客

01-13

1744

vue项目部署到服务器上会默认为例如ROOT的文件夹下，这样会直接访问改文件夹下的index.html文件。假如现在有需求是把项目放到某一个子路径下，如果不更改设置会出现资源不加载，引用js文件找不到，刷新页面报404等问题。 1、在public文件夹下引用js文件，路径写成 ./ 2、在config/index.js文件中，打包路径应写成 /子路径名/ 例如：/child/。 3、在路由文件中修改base属性，这个是防止刷新跳回默认路径的。 export default new Router({

前端vue项目部署二级路径问题解决

weixin_72610911的博客

12-05

783

这样当网页访问到html文件后继续请求静态资源就根据/aaa/config.js(举例)去寻找静态文件，对应的如果路由模式为history,还需要设置base项为'/aaa/',这样每次页面路由跳转时路由地址前缀都会加上/aaa/以便于正确的寻找到菜单页面。但也不妨有部署到服务器二级三级的情况，这里来讲解一下vue项目部署到二级路径的前端配置。说白了就是我们vue项目打包后为静态资源引用路径加个前缀路径，比如我们要部署到/aaa/二级路径，那么publicpath就设置为'/aaa/',

tomcat部署vue前端项目设置路径

m0_61103773的博客

06-07

596

F:\机构软件\src\router\index.js中。和**.env.development**文件中。

Linux部署前端Vue项目

weixin_45565886的博客

12-26

5264

Linux部署前端Vue项目

nginx部署前端(vue)项目及配置修改

ywanju的博客

01-28

3042

linux部署vue项目

Linux 环境下部署 VUE 前端项目

EvoGenius的博客

05-30

1397

在发起请求过程中，对于url中以'/api'开头的请求，首先会将/api重写为空字符串，然后将vue.config.js文件中'/api'对应的target目标地址连接到请求头部，即若请求url为“ /api/management/login”，则实际会将请求发送到。当在前端vue项目中需要调取受同源策略保护的Web API时，即发生所谓跨域请求，此时发送不成功，一般可以采用ajax的jsonp发起跨域请求，而对于vue项目的axios不支持jsonp请求。文件夹，即为需要上传到服务器上的文件夹。

Vue前端项目部署在tomcat

My note

07-21

3556

修改路由配置src/router/index.js，增加配置base‘/Vue/’，如果这里不配置，会导致部署的项目首页访问一片空白，但不报错，且引入的文件有正常加载。执行npmrunbuild，将打包生成的dist目录下的所有东西粘贴到Tomcat/webapps/路径下新建一个Vue文件夹，Vue是自定义的项目名，访问路径格式>>ipport/Vue，例如http//localhost8080/Vue/，即可访问到Vue项目。前端项目中使用到了代码。...

前端VUE项目部署到远程服务器

qq_42552025的博客

01-07

3174

前端VUE+nginx部署远程服务器

nginx部署多个项目；vue打包项目部署设置子路径访问；一个根域名（端口）配置多个子项目

北海_南风

07-04

661

本文解决： - vue打包项目部署设置子路径访问； - nginx部署多个子项目； - 一个ip/域名端口配置多个子项目； - 配置后，项目能访问，但是刷新页面就丢失的问题

vue项目部署在域名的子目录下应该如何配置

徐三岁的博客

09-04

1394

需求：实现本地调试直接使用根目录，build发布后支持部署在http://www.xxx.com/myapp子目录下解决：vue-cli脚手架搭建的项目，都是默认以根目录形式配置（http://www.xxx.com），想要部署在子目录下（http://www.xxx.com/myapp ）需要修改相应的配置才能实现。 .env.production文件 # just a flag ENV = 'production' # base api VUE_APP_BASE_API = 'http://w

Vue前端项目部署IIS的实现

10-15

在现代Web开发中，Vue.js是一个非常流行的前端框架，用于构建用户界面。然而，为了让非开发人员能够方便地访问和展示基于...希望这个教程对你在部署Vue项目到IIS的过程中有所帮助，记得持续学习和探索更多Web开发技巧。

Vue项目部署Nginx配置文件 SSL

08-11

在部署 Vue 项目时，Nginx 配置文件 `nginx.conf` 的关键设置如下： 1. **基本配置**： - `server` 块：定义一个监听特定端口（通常是80）的服务器实例。 ```nginx server { listen 80; server_name your...

详解vue通过NGINX部署在子目录或者二级目录实践

10-18

首先，我们要在Vue项目中进行一些配置调整。在`router/index.js`文件中，我们需要设置Vue Router的基础路径。例如，如果我们要将应用部署到`/admin`子目录下，我们需要添加以下代码： ```javascript import Vue ...

WEB渗透Web突破篇-SSRF

最新发布

qq_59468567的博客

08-03

943

转码服务在线翻译获取超链接的标题等内容进行显示请求远程服务器资源的地方，图片加载与下载(通过URL地址加载或下载图片) 图片、文章收藏功能对外发起网络请求的地方，网站采集、网页抓取的地方。头像 (远程加载头像) 一切要你输入网址的地方和可以输入ip的地方。数据库内置功能(mongodb的copyDatabase函数) 邮件系统文件处理在线处理工具从URL关键字中寻找：share、wap、url、link、src、source、target、u、3g、display、sourceURl、im

html+css+js实现一个简单的电商商城首页

爱敲代码的卡拉米的博客

08-02

357

很多刚入门编程的小白学习了基础语法，却不知道语法的用途，不知道如何加深映像，不知道如何提升自己，这个时候每天刷自主刷一些题就非常重要（百炼成神），可以去牛客网上的编程初学者入门训练。2.💗【👇🏻👇🏻👇🏻关注我| 获取更多源码 | 优质文章】带您学习各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板、大学生毕业HTML模板、期末大作业模板、等!绿泡泡：XiaoMei_NN。

探索WebKit之巅：开启现代网页应用的高效与兼容之旅

weixin_67239318的博客

08-03

500

随着现代网页应用的快速发展，WebKit作为先进的浏览器引擎，其在高效性和兼容性上的表现显得尤为重要。本文深入探讨了WebKit的架构和渲染机制，揭示了其在支持Web标准和提升浏览体验方面的关键技术。通过分析WebKit如何处理DOM操作、JavaScript执行与图形渲染等挑战，我们了解到优化WebKit性能不仅关乎算法和硬件的优化，还涉及网络协议和安全框架的理解。此外，本文讨论如何通过WebKit应对多设备和分辨率下的兼容性问题。掌握这些关键因素，对于开发者来说，是打造高效、兼容的现代网页应用的基础。

高德地图离线版使用高德地图api的方法

m0_62336925的博客

08-02

594

然因为高德地图的瓦片地图太大，所以要让后端部署下前端直接调用如果本地直接找到瓦片图路径就可以。这个代码把你想用的方法名保存到本地。这个时候会报错因为没有这个方法。然后就可以正常使用这个方法拉。然后使用他的离线方法。找到对应的名字复制。

nginx部署前端vue项目配置示例

07-04

Nginx是一个流行的开源Web服务器和反向代理服务器，常用于静态内容的高效分发和动态请求的路由。要在Nginx上部署前端Vue项目的静态文件，并处理API请求，你可以按照以下步骤配置： 1. **安装Nginx**（假设已经安装）：如果你是Linux用户，可以在终端运行`sudo apt-get update && sudo apt-get install nginx`。 2. **创建Vue项目的目录结构**：创建一个名为`your-project-name`的目录，其中包含`dist`目录，这是Vue构建后的生产环境文件。 3. **配置Nginx**：在Nginx的配置文件（通常是`/etc/nginx/sites-available/default`）中，添加或编辑以下内容。请注意，你需要根据实际路径替换`/path/to/your/project`： ```nginx server { listen 80; # 可能需要修改为特定端口，比如443或8080 server_name your-domain.com; # 替换为你的域名 root /path/to/your/project/dist; # Vue项目部署目录 index index.html; # 设置默认首页 try_files $uri $uri/ =404; # 处理非存在的URL location /api { # 对于API请求 proxy_pass http://localhost:3000; # 指向Vue应用的后端API proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; proxy_http_version 1.1; proxy_set_header Upgrade $http_upgrade; proxy_set_header Connection "upgrade"; } error_page 404 /404.html; # 自定义404页面 } ``` 4. **启动Vue服务**：在Vue项目中，如果你有一个如`npm run serve`启动本地服务器的命令，记得先启动这个服务。 5. **启用Nginx配置**： `sudo ln -s sites-available/your-site.conf sites-enabled/`，然后重启Nginx：`sudo service nginx restart`。 6. **测试部署**：打开浏览器访问`http://your-domain.com`，查看是否显示Vue项目的首页，API请求则指向`http://your-domain.com/api`。