时间戳

首页 > 技术文章 > Vue项目部署在IIS

Vue项目部署在IIS

qtiger 2020-09-08 11:11 原文

一、方式一 将vue发布到一个单独的网站上

发布vue项目，生成dist文件夹

 

 

 

打开iis服务器后选中【网站】后右击选【添加网站】，物理路径指向发布生成的dist文件夹

到此项目就部署好了，点击右侧浏览即可打开网站

 

 你以为部署完成就可以了，遇到的问题才刚开始

  

 没错，开发环境下没问题的项目，在通过以上发布部署后报错了，先归纳了下出现的错误：

1、提示Vue is not  defined，如下截图

 

 2、提示Unexpected token <，如下图

 

 

3、经过网上的各种解决方式终于摆脱了有些错误，打开了网站，但是刷新页面，却报404.。。。。。如下图

  

 先说说我在网上找的解决方式吧，为了解决Vue is not  defined，我对项目代码做了调整，包括资源的引用方式、路由的调整和mode：history改为了mode：hash等等吧，每次都会引出其他错误。后来遇到IIS中开启代理和设置URL重写的方式来解决，一一做了尝试，发现还是报错Unexpected token <，首先可以确定不是代码的问题。总之肺疼

还好，还好最终找到了解决我问题的方式

总体来说就是在IIS正常部署完vue项目上之后，需要对URL重定向，原因是vue是根据vue-router转发路由访问url，在这里我们应该进行url rewrite。url write的方式有两种

1、在iis下载url rewrite工具配置规则

上边说过我尝试过该方式，也下载了所需模块：urlrewrite，可能配置的有问题，反正就是报错，如果能正确配置应该是没问题的

 

2、配置web.config文件

最终我使用了该方式，简单方便，和使用URL重写原理是一样的

web.config的内容：

<?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>

将该文件拷贝到打包好根目录下面

 然后发现网站OK了

二、通过添加应用程序进行部署

除了以上方式之外，还有另一种方式在IIS部署VUE项目，方便简洁，不会出现以上的各种问题。即新建一个网站，在该网站下，添加应用程序或者添加虚拟目录，具体有时间在描述下

推荐阅读