Vue项目打包部署到iis服务器

超、凢脫俗 2023-06-07 05:35 295阅读 0赞

## 一 将Vue项目打包 ##

切换到项目目录下，输入`cnpm run build` 打包  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3JqMjAxNzIxMTgxMQ_size_16_color_FFFFFF_t_70]  
等待打包完成  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3JqMjAxNzIxMTgxMQ_size_16_color_FFFFFF_t_70 1]  
二 URL 重写  
访问我们的一个url  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3JqMjAxNzIxMTgxMQ_size_16_color_FFFFFF_t_70 2]  
原因是vue不是根据项目目录的地址访问的，是根据vue-router转发路由访问url，在这里我们应该进行url rewrite  
url write的方式有两种，一种是在iis下载url rewrite工具配置规则  
另一种是配置web.config文件，我用的是第二种  
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>

将该文件拷贝到打包好根目录下面  
![在这里插入图片描述][20191012181905171.PNG]  
发现成功访问到我们的url  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3JqMjAxNzIxMTgxMQ_size_16_color_FFFFFF_t_70 3]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3JqMjAxNzIxMTgxMQ_size_16_color_FFFFFF_t_70]: /images/20230601/424dfd02787c4ee29f11f48c787e6767.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3JqMjAxNzIxMTgxMQ_size_16_color_FFFFFF_t_70 1]: /images/20230601/70845cef624d4883a2c27ff0fceeaaa7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3JqMjAxNzIxMTgxMQ_size_16_color_FFFFFF_t_70 2]: /images/20230601/9282991ab06a4f01a8942993267127a6.png
[20191012181905171.PNG]: /images/20230601/ba2c9bac9ef24e68ad2c6391d57187f0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3JqMjAxNzIxMTgxMQ_size_16_color_FFFFFF_t_70 3]: /images/20230601/d0aa4288e0aa4975ada4dbf4b66a5d94.png