精华内容
下载资源
问答
  • 一 将Vue项目打包 切换项目目录下,输入cnpm run build 打包 等待打包完成 二 URL 重写 访问我们的一个url 原因是vue不是根据项目目录的地址访问的,是根据vue-router转发路由访问url,在这里我们应该...
  • 需求:1、项目完成了,但是还没有与正式后台连接(数据是本地json)2、现有代码上线IIS准备工作1、部署IIS服务器2、项目执行build生成需要部署的文件步骤一:复制文件把build之后的文件(dist文件夹)拷贝IIS存放网站...

    需求:

    1、项目完成了,但是还没有与正式后台连接(数据是本地json)

    2、现有代码上线IIS

    准备工作

    1、部署IIS服务器

    2、项目执行build生成需要部署的文件

    步骤一:复制文件

    把build之后的文件(dist文件夹)拷贝到IIS存放网站文件的目录

    注意:

    拷贝的时候不一定是要把dist整个文件夹拷贝,也可以拷贝里面的内容,这个需要看自己的需求。如果不明白的话,可以跟我一样做。

    步骤二:在IIS中新建站点

    在"网站"执行鼠标右键,选择添加网站。

    网站名称:按照用途或者项目起名即可

    应用程序池:部署前端项目,这个可以忽略,任意选择即可

    内容目录:网站存放的路径,最好以英文命名

    端口:web一般是80端口,不过我的80已经被其他项目占用,所以我设置为8082

    步骤三:访问网站

    访问网站可以在IIS界面右侧直接浏览,具体见上图,或者直接在浏览器地址栏输入:http://localhost:8082/

    很多网友的文章到此应该就结束了,他们大多都显示成功截图。 but,我这边却是一个接一个坑。

    下面我就给大家分享一下我的填坑之旅 ?

    步骤四:填坑

    坑一、报错:URL拼写错误

    打开网址发现页面报错,如下图:

    报错内容:

    见上图显示,提示URL拼写错误。

    我在路由中设置访问"/"会重定向到"/brand/company",所以上图中访问地址是正确的。

    在IIS中开启代理和设置URL重写可以解决上诉问题。 具体如下 ?

    步骤一:URL重写

    2、设置规则

    安装好模块之后,在IIS是图界面会看到"URL 重写"

    双击之后,进入URL重写界面,在右上角点击"添加规则",具体如下图:

    选择"空白规则",进入规则设置界面,具体见下图:

    注意:

    名称:名称按功能命名即可

    匹配URL:选择使用正则表达式,然后模式根据请求的api来填写,比如我请求的api地址全都是为'/api/---',那我这里填写^((?!(api)).)*$即可

    手动展开"条件"选项,添加一个"条件",选择"不是文件",具体见上图

    手动展开"操作"选项,设置"重写URL"为"/index.html",然后点击右上角应用,重写URL的规则就设置好了。

    步骤二:代理设置

    1、下载所需模块

    这里需要配置urlrewrite 和 Application Request Routing两个模块。urlrewrite 在步骤一种已经安装过了,我们需要下载application request routing,传送门:https://www.iis.net/downloads/microsoft/application-request-routing

    2、开启代理

    按照好application request routing模块之后再IIS功能视图界面可以看到相关设置,具体见下图:

    双击进入设置界面,在右上角找到设置项目,点击进入,具体见下图:

    Enable proxy 设置为"开启",在右侧点击"应用"即可,具体见下图:

    3、设置urlrewrite规则

    名称:根据功能命名即可

    匹配URL:使用"通配符";前端请求的地址是'/api/----',所以模式设置"*api/*"

    条件:不需要配置

    操作:重写URL,比如我请求的实际地址是'https://blog.csdn.net/write',那我这里就填写'https://blog.csdn.net/{R:2}',具体跟实际情况填写

    另外,规则数目需要根据自己请求的api地址类型数目来设置

    坑二:文字乱码

    经过上述配置之后,再次打开网址,已经可以正常访问了,具体见下图:

    but,一坑刚平一坑又现,没有办法,开发的路上总是崎岖坎坷,兄弟你要有一颗强大的心

    解决方案:

    在文件夹中,选择index.html执行鼠标右键,选择打开方式为"记事本"

    之后进入记事本,不需要任何编辑,执行:文件> 另存为,编码选择"UTF-8"保存即可

    回到浏览器刷新页面,文本已经正常显示了

    坑三:页面数据不显示

    从坑二的最后一张图可以看到,页面显示空白,这是因为数据没有请求到,具体是为啥呢?

    这是前面项目中请求方式埋下的坑。

    在代码中改回真实的请求路劲即可

    经过上述配置,vue项目真正成功的部署到IIS中了。

    上文如有错误,请各位朋友指出,感谢。

    展开全文
  • 前端Vue项目需要部署IIS服务器上:准备工作:1:部署IIS服务器2:项目npm run build打包生成需要部署的文件(dist文件夹)我的是manage文件夹开始部署:1:复制文件把打包好的文件(dist/manage文件夹)拷贝IIS存放网站...

    前端Vue项目需要部署到IIS服务器上:

    准备工作:

    1:部署IIS服务器

    2:项目npm run build打包生成需要部署的文件(dist文件夹)我的是manage文件夹

    开始部署:

    1:复制文件

    把打包好的文件(dist/manage文件夹)拷贝到IIS存放网站文件的目录

    2:打开IIS服务器,添加网站

    鼠标右键"网站",选择添加网站。

    网站名称:按照用途或者项目起名即可

    应用程序池:部署前端项目,这个可以忽略,任意选择即可

    内容目录:网站存放的路径,最好以英文命名(到公司框架层即可)

    端口:web默认是80端口,如果80端口已被占用请设置,我设置为8088

    3:浏览网站

    点击右侧浏览出现上述空白页面解决办法在端口号后面加上文件夹名字manage  即http://localhost:8088/manage即可:

    这样在别的机子上就可以访问了如果部署机器的ip为192.168.95.54那么访问地址为http://192.168.95.54:8088/manage

    展开全文
  • vue项目部署到IIS服务器

    千次阅读 2019-11-12 23:20:31
    vue项目部署到IIS服务器上 1、项目执行build生成需要部署的文件 npm run build 2、发布文件 把build之后的文件(dist文件夹)拷贝IIS存放网站文件的目录 3、在IIS中新建站点,并设置相关权限 4、url重写 打开...

    将vue项目部署到IIS服务器上

    1、项目执行build生成需要部署的文件

    npm run build
    

    2、发布文件

    把build之后的文件(dist文件夹)拷贝到IIS存放网站文件的目录

    3、在IIS中新建站点,并设置相关权限

    4、url重写

    打开网址发现页面,一般会报错,如下图:

    在这里插入图片描述
    这是vue路由模式与iis不一致,需要url重写

    首先 先确认url重写是否安装,未安装的话,进入官网https://www.iis.net/downloads/microsoft/url-rewrite下载安装
    在这里插入图片描述

    url重写安装好后,在发布目录下,新增一个web.config文件,用于url重写,内容如下:

    <?xml version="1.0" encoding="UTF-8"?>
    <configuration>
     <system.webServer>
     <staticContent>
      <remove fileExtension=".woff" />
      <mimeMap fileExtension=".woff" mimeType="font/x-woff" />
      <remove fileExtension=".woff2" />
      <mimeMap fileExtension=".woff2" mimeType="font/x-woff2" />
      <remove fileExtension=".ttf" />
      <mimeMap fileExtension=".ttf" mimeType="font/x-ttf" />
      <remove fileExtension=".json" />
      <mimeMap fileExtension=".json" mimeType="text/json" />
     </staticContent>
     <rewrite>
      <rules>
      <rule name="vue" stopProcessing="true">
       <match url=".*" />
       <conditions logicalGrouping="MatchAll">
       <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
       <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
       </conditions>
       <action type="Rewrite" url="/" />
      </rule>
      </rules>
     </rewrite>
     </system.webServer>
    </configuration>
    

    重新打开链接,就能成功访问到我们的url

    在这里插入图片描述

    展开全文
  • Vue项目部署到IIS服务器 步骤 第一次接触这个iis服务器,感觉nginx他不香吗?非用这玩意,不过没办法服从安排 步骤 Vue项目打包 创建IIS网站 打开IIS服务器 创建完成后 打开浏览器输入http://localhost:端口...

    Vue项目部署到IIS服务器


    第一次接触这个iis服务器,感觉nginx他不香吗?非用这玩意,不过没办法服从安排

    步骤

    1. Vue项目打包

    2. 创建IIS网站
      打开IIS服务器
      在这里插入图片描述在这里插入图片描述

    3. 创建完成后
      打开浏览器输入http://localhost:端口号,即可打开打包后的项目

    4. vue-router模式为hash的走到这一步应该就没有问题了
      history模式下刷新页面后会出现404页面,找不到文件资源
      因为这个是通过文件地址俩打开页面。服务器无法找到路由对应的文件,所以会出现404报错(自行理解,若不对还请提出)。

    5. 解决history模式下刷新页面出错问题
      此项需要通过IIS服务器中的web平台安装程序下载 URL Rewrite
      (我在网上找到好多但基本没有用)
      注意URL Rewrite该程序 需要下载英文版,中文版无法下载,网上的修改注册
      表的方法我试过没有作用,可能是因为其他问题吧(英文版URL Rewrite 资源放
      在下面)

    6. URL Rewrite 使用
      选中你要做url 重定向的网站,双击安装后的 URl Rewrite
      在这里插入图片描述

    7. URL Rewrite 添加重定向规则

    在这里插入图片描述
    在这里插入图片描述在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    8. 之后应用规则就可以了,刷新也不会404

    url rewrite资源链接: 百度云盘地址. 提取码: dxsq

    展开全文
  • 一、Vue项目部署到IIS服务器 1、终端执行命令:npm run build,对项目进行打包,打包完成过后,项目目录新增dist文件夹 2、打开IIS服务器,添加网站,选择打包好的dist文件夹。设置如下: 3、部署完成,浏览...
  • 全网最全教你轻松把vue项目部署到IIS服务器

    万次阅读 多人点赞 2019-05-31 22:24:00
    1、部署IIS服务器 2、项目执行build生成需要部署的文件 步骤一:复制文件 把build之后的文件(dist文件夹)拷贝IIS存放网站文件的目录 注意: 拷贝的时候不一定是要把dist整个文件夹拷贝,也可以拷贝里面...
  • 主要介绍了Vue前端项目部署IIS的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
  • Vue项目打包部署到iis服务器

    千次阅读 2019-10-12 18:11:54
    一 将Vue项目打包 切换项目目录下,输入cnpm run build 打包 等待打包完成 二 URL 重写 访问我们的一个url 原因是vue不是根据项目目录的地址访问的,是根据vue-router转发路由访问url,在这里我们应该进行url ...
  • 关于部署服务器404问题 https://blog.csdn.net/bigbear00007/article/details/90718450
  • 2.vue项目跟目录设置vue.config.js module.exports = { publicPath: process.env.NODE_ENV === 'production' ? '/远程仓库名字/' : '/' } 3.打包及上传远程仓库 npm run build 复制dist文件夹另外新建文件夹...
  • https://blog.csdn.net/liwei3544/article/details/105631972/ vue项目部署到 IIS 服务器上出现很多问题,我从网上搜集了大量的解决方法,以下是目前出现问题的总结,我涉及了两种 一种是vue-cli4.0 直接创建的项目...
  • 怎么将Vue项目打包部署到iis服务器中发布时间:2021-03-11 17:18:01来源:亿速云阅读:71作者:Leah这篇文章将为大家详细讲解有关怎么将Vue项目打包部署到iis服务器中,文章内容质量较高,因此小编分享给大家做个...
  • Vue项项目目打打包包部部署到到iis服服务务器器的的配配置置方方法法 这篇文章主要介绍了Vue项目打包部署到iis服务器的配置方法文中通过代码示例给大家介绍的非常详细具 一 定的参考借鉴价值,需要的朋友可以参考下...
  • 最近写了个vue项目,然后想在本地window环境发布,这时就要用到windows本身自带的IIS服务,将本地开发的项目放这个服务器上面去,这样就OK了。具体的实施步骤如下(以win10为例)1、win+r打开cmd命令窗口,输入...
  • Vue项目部署IIS

    2020-12-21 03:57:24
    一、方式一 将vue发布一个单独的网站上发布vue项目,生成dist文件夹打开iis服务器后选中【网站】后右击选【添加网站】,物理路径指向发布生成的dist文件夹此项目就部署好了,点击右侧浏览即可打开网站你以为部署...
  • 1. 项目服务端是 koa + mysql,前端是 vue + antd,虽然是自己一个人开发,但是还是选择了前后端分离,这样后边更好分别维护(有计划要用go把服务端重写) 2. 服务器是买在阿里云,考虑和开发环境一样会减少很多...
  • VUE项目部署到tomcat服务器-前端配置

    千次阅读 2020-04-25 11:14:15
    对于前后端分离项目,后端通常直接用springboot以java -jar启动,或者打成war包放置tomcat中;前端工程使用webpack打包在dist文件夹下,再将statis和index.html放置nginx等服务中。对于后端开发者而言,将后端和...
  • 一般在做前后端分离的时候, 前端服务器用的都是nginx,可是公司项目是需要运行在windows server上面的,所以综合考虑之下用IIS比较好一些,然而这方面的资料不如nginx那么多,所以就想记录一下这段时间遇到的坑,以...
  • 可以尝试在 IIS 管理器里点击网站下的文件夹,右键刷新,并重启服务器,一次不行就试两次。

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 741
精华内容 296
关键字:

vue项目部署到iis服务器

vue 订阅