vue 前端项目部署到IIS服务器的常见错误

最新推荐文章于 2024-04-12 15:24:35 发布
最新推荐文章于 2024-04-12 15:24:35 发布
阅读量2.2k 收藏
点赞数 1
分类专栏： 笔记 文章标签： vue iis 服务器 asp
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43889418/article/details/112990005
版权
本文总结了Vue项目（包括vue-cli4.0和基于webpack创建的项目）部署到IIS服务器时可能遇到的问题及解决方案。主要问题包括：文件找不到和静态JSON数据获取失败。对于vue-cli4.0项目，需在vue.config.js中添加配置，确保API文件与发布的IP地址一致。对于数据存放，本地测试时可与项目在同一根目录下，但正式发布时需处理跨域和路由跳转问题，可通过URL重写和设置代理解决。
摘要由CSDN通过智能技术生成

https://blog.csdn.net/liwei3544/article/details/105631972/

vue项目部署到 IIS 服务器上出现很多问题，我从网上搜集了大量的解决方法，以下是目前出现问题的总结，我涉及了两种
一种是vue-cli4.0 直接创建的项目（升级版）

vue create 项目

一种是基于webpack创建的vue项目

vue init webpack 项目

两种项目的解决方法基本一样，废话不多说，直接说问题

问题一
在这里插入图片描述
解决方案
在这里插入图片描述
问题二
无法找到文件，我的数据是放在static/mock 或者 public/mock中的静态json文件中，使用axios get获取数据。
在这里插入图片描述我的项目中出现这个问题是因为 vue-cli4.0 项目中的 vu

最低0.47元/天 解锁文章
前端路上取经人
关注
专栏目录
IIS部署vue项目404/500问题
Xuhai0811的博客
08-15 226
报错：Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/html". Strict MIME type checking is enforced for module scripts per HTML spec.配置vue.config.js或vite.config.js， base为‘./’或‘/’ （具体看是否是根目录）
Vue3项目打包后部署到服务器 请求不到后台接口解决方法
10-15
在本篇文章里小编给大家整理了关于Vue3项目打包后部署到服务器 请求不到后台接口解决方法，有需要的朋友们可以参考下。
vue部署项目到IIS服务器
Yilong18的博客
11-15 611
IIS部署
vue_域名部署无法访问后端
Byron__的博客
12-15 709
目前部署的比较另类，因为服务器为windows，目前还不是很会nginx，所以现在就只能在服务器上安装nodejs，然后直接使用命令行的方式运行项目。
Vue打包部署IIS无法请求
从入坑到入土
12-31 1364
ARRv3_0 下载安装URl重写URL Rewrite 第一步安装，IIS配置，打开 第二步,点击 Server Proxy Settings 第三步，选中 应用 Vue打包部署 配置URL重写规则 编写规则后，点击应用 重写路径一vue.config.js保持一致 请求成功 ...
VUE项目IIS部署 使用nginx代理访问后端接口
最新发布
04-12 465
【代码】VUE项目IIS部署 使用nginx代理访问后端接口。
net的项目部署在服务器上,一步步教你部署.net Core+Vue项目到服务器
weixin_35980160的博客
08-03 1514
最近一直在做项目，发布部署的事情都是同事或者老大做的，无奈什么事都要自己尝试经历后才能记住，所以发布的事情轮到我了，由于是第一次发布部署项目到一个新的服务器环境，难免会遇到各种各样的问题，总结下来，希望可以帮到需要的人。项目框架使用的是vue+.netCore2.2所以发布的时候需要前后端分开发布，遇到的问题是挺多的，不过对自己来说也算是一种经历吧。一．.netCore项目发布1.1修改环境配...
若依前后端分离项目部署文档.docx
09-09
在IT行业中，前后端分离项目的部署是一项至关重要的任务，它涉及到服务器配置、应用打包、代理设置等多个环节。本文档详细介绍了两种不同的部署方案，一种是在Linux服务器上部署SpringBoot+Vue项目，结合Nginx和...
前端高频vue面试题合集
bb_xiaxia1998的博客
10-27 3203
Vue-Router有两种模式：hash模式和history模式。默认的路由模式是hash模式。简介： hash模式是开发中默认的模式，它的URL带着一个#特点：hash值会出现在URL里面，但是不会出现在HTTP请求中，对后端完全没有影响。所以改变hash值，不会重新加载页面。这种模式的浏览器支持度很好，低版本的IE浏览器也支持这种模式。hash路由被称为是前端路由，已经成为SPA（单页面应用）的标配。原理： hash模式的主要原理就是onhashchange()事件： 使用onhashchange()事
教你发布vue+.netCore项目到服务器
lonely_bin的博客
07-18 3022
最近一直在做项目，发布部署的事情都是同事或者老大做的，无奈什么事都要自己尝试经历后才能记住，所以发布的事情轮到我了，由于是第一次发布部署项目到一个新的服务器环境，难免会遇到各种各样的问题，总结下来，希望可以帮到需要的人。 项目框架使用的是vue+.netCore2.2所以发布的时候需要前后端分开发布，遇到的问题是挺多的，不过对自己来说也算是一种经历吧。 一．.netCore 项目发布 1...
Vue前端项目部署IIS的实现
10-15
主要介绍了Vue前端项目部署IIS的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
Vue项目部署到IIS服务器
futurepromising的博客
03-25 1429
Vue项目部署到IIS服务器 步骤 第一次接触这个iis服务器，感觉nginx他不香吗？非用这玩意，不过没办法服从安排 步骤 Vue项目打包 创建IIS网站 打开IIS服务器 创建完成后 打开浏览器输入http://localhost:端口号，即可打开打包后的项目 vue-router模式为hash的走到这一步应该就没有问题了 history模式下刷新页面后会出现404页面，找不...
vue项目部署iis服务器404问题
weixin_45310428的博客
09-09 582
关于部署服务器404问题 https://blog.csdn.net/bigbear00007/article/details/90718450
vue项目部署到iis服务器_vue项目部署到IIS服务器
weixin_39621975的博客
12-21 187
需求：1、项目完成了，但是还没有与正式后台连接(数据是本地json)2、现有代码上线IIS准备工作1、部署IIS服务器2、项目执行build生成需要部署的文件步骤一：复制文件把build之后的文件(dist文件夹)拷贝到IIS存放网站文件的目录注意：拷贝的时候不一定是要把dist整个文件夹拷贝，也可以拷贝里面的内容，这个需要看自己的需求。如果不明白的话，可以跟我一样做。步骤二：在IIS中新建站点在...
vue的部署IIS后，当我们进入到某个路由之后，按F5刷新页面会出现404错误：
lixilai_rjkf的博客
08-20 604
vue的单页应用部署后，当我们进入到某个路由之后，按F5刷新页面会出现404错误： IIS下部署后的解决方案一般是使用 URLRewrite 首先要安装URLRewrite 下载地址 准备一个简单的vue项目只包含路由功能 (安装了vue-router cnpm i -S vue-router) image.png main.js import Vue from 'vue' import App from './App.vue' import router from './rou..
【vue笔记】vue部署二级目录不显示
NJRR1994的博客
05-30 987
解决方法一： 在路由配置router文件夹--index.js文件中新增2句代码，jsc为你所需要配置的二级目录名： const router = new VueRouter({ mode: 'history', base: '/jsc/', // 这是二级路径 routes }) 解决方法二： 在vue.config.js中新增2句代码： const BASE_URL = process.env.NODE_ENV === 'production' ? '/jsc' :
vue-router 三级路由，路由跳转页面异常白屏或404，或刷新三级路由页面后一级和二级路由菜单丢失
tangdou369098655的博客
02-22 1814
某些时候是因为二级和三级的路由共用router-view，可以使用router-view 和 redirect 解决问题。欢迎大家指出文章需要改正之处~
vue项目部署到iis服务器_vue项目部署在IIS上面的心得
weixin_39975261的博客
12-21 302
一般在做前后端分离的时候， 前端服务器用的都是nginx，可是公司项目是需要运行在windows server上面的，所以综合考虑之下用IIS比较好一些，然而这方面的资料不如nginx那么多，所以就想记录一下这段时间遇到的坑，以防自己以后再遇到的时候忘记了，这样我可以翻出来看看。这里只说一下url重写、代理设置、以及关闭ETag三个点，其余的都是网上可以轻松搜索到并且能看懂的，就不再赘述。url重...
将前端vue项目部署到nginx服务器
06-06
将前端 Vue 项目部署到 Nginx 服务器，可以按照以下步骤进行： 1. 构建项目：在本地开发环境中，进入 Vue 项目的根目录，执行以下命令进行构建： ``` npm run build ``` 这个命令会在项目的 `dist` 目录下生成一个静态文件夹，里面包含了构建好的前端静态资源。 2. 将构建好的静态资源上传到服务器：将构建好的 `dist` 目录打包成一个 zip 文件，并上传到服务器上。 3. 安装 Nginx：在服务器上安装 Nginx，具体安装方法可以参考 Nginx 的官方文档。 4. 配置 Nginx：在 Nginx 的配置文件中添加以下内容： ``` server { listen 80; server_name yourdomain.com; # 填写你的域名或 IP root /path/to/dist; # 填写你上传到服务器的静态资源目录 index index.html; location / { try_files $uri $uri/ /index.html; } } ``` 这个配置文件会将所有请求都重定向到 `index.html` 文件，从而实现前端路由的正常访问。 5. 启动 Nginx：在终端中执行以下命令启动 Nginx： ``` nginx ``` 6. 访问网站：在浏览器中输入你的域名或 IP 地址，即可访问前端网站。 以上就是将前端 Vue 项目部署到 Nginx 服务器的基本步骤。需要注意的是，如果使用 HTTPS 协议访问网站，则需要在 Nginx 的配置文件中添加 SSL 证书的相关配置。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值