【IIS】WebApi和Vue混合发布

摘要:
Https:记录网站条目和模板文件。b我们需要做的是在这里复制Vue的index.html文件和静态资源文件,将index.cshtml文件的内容更改为Vue的/index.html文件,然后将静态文件夹放在同一路径中,删除默认的界面布局<metahttp equiv=“内容类型”Content=“text/html;

何为混合发布呢?

  混合发布的意思就是在webapi的主文件夹下,放置vue网站目录   让vue和webapi使用同一个端口号进行访问

  比如:原来的webapi地址为:https://47.96.66.32:1234/Webapi/         Vue再发布一个地址是:https://47.96.66.32:1235/

       混合后Vue的地址是:https://47.96.66.32:1235/   Webapi地址也是:https://47.96.66.32:1235/Webapi/

具体实现:

  a、修改WebApi目录下的页面结构,下图应该都不陌生。里面记录了网站入口及模板文件

  【IIS】WebApi和Vue混合发布第1张

         b、我们要做的就是把Vue的index.html文件及静态资源文件拷贝到这里,然后修改默认的index.cshtml文件,让index.cshtml文件的内容变为Vue的Index.html文件内容即可

  然后把static文件夹放置到相同路径下,如图:  (图中index.cshtml实际上就是Vue的index.html文件,只要简单修改文件后缀让.net能识别到文件即可)

  【IIS】WebApi和Vue混合发布第2张

  【IIS】WebApi和Vue混合发布第3张

   c、把_Layout.cshtml文件修改一下,去掉默认的界面布局

  

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

</head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<body>
        @RenderBody()
</body>
</html>

       d、然后运行页面,此时页面找不到资源   .......css类似的错误。根据提示可以看到资源文件是默认在网站根目录加载的,所以把static静态文件拷贝到webapi根目录下

  【IIS】WebApi和Vue混合发布第4张

   此时再运行就OK了,而且这样也能保证webapi的访问。

  e、最后提一个Vue图标问题,也是因为路径导致Vue网站里的小图标无法访问,可根据提示将ttf、woff资源文件拷贝到对应目录即可。

      最终就是将fonts文件夹在css文件夹下创建static文件夹,然后把fonts文件夹放进去就可以了

      【IIS】WebApi和Vue混合发布第5张

后续碰到的问题:

     由于Vue前端注释掉了页面地址中默认的#号,导致类似 xxxxx/stuList页面刷新时触发了MVC路由机制

     页面就看不到了,提示找不到对应的Controller

     【IIS】WebApi和Vue混合发布第6张

     解决的方法:

           恢复Vue页面中的#号,防止触发MVC后台路由

      

      

  

免责声明:文章转载自《【IIS】WebApi和Vue混合发布》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇pycharm配置git及简单使用iOS Xcode中LLVM编译器下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

Qt程序的字符编码方式

本节会创建一个图形界面 Qt 程序,并故意对源文件使用不恰当的字符编码方式,导致其文本显示控件的汉字乱码。我们会介绍两种纠正方法: 第一种是不修改源代码文件编码格式,通过 QString::fromLocal8Bit() 函数在程序运行时转码; 第二种是直接将源代码文件整体转换成 UTF-8 编码,就不需要修改具体的代码行了。 第二种是最为推荐的方式,...

pyinstaller深入使用,打包指定模块,打包静态文件

1.标准用法:     pyinstall  **.py  直接打包    pyinstall -F **.py  打包成单文件    pyinstall -W **.py  去掉控制台窗口,黑窗口    pyinstall -i ***.ico **.py  添加图标 *** 2.高级用法:     打包一遍以后,会在py文件目录下生成spec文件,是...

iOS添加测试设备与调试

转至:http://www.lidaze.com/  在上一篇博客中,已经购买好了开发账号,既然都交了钱了,就做点有意义的事吧!要想使用真机测试,需要准备如下: 1.证书:安装到电脑上的cer文件,只有安装了证书的电脑,才可以进行真机调试2.App ID:就是应用程序的Bundle ID,每个应用程序都有一个唯一的Bundle ID,但是我们没必要为每...

Pureftpd.conf 配置详解

# /usr/local/pureftpd/sbin/pure-config.pl /usr/local/pureftpd/etc/pure-ftpd.conf # # RPM 缺省使用另外一个配置文件: # /etc/sysconfig/pure-ftpd # # 请不要忘了浏览一下 [url]http://www.pureftpd.org/d...

cordova热更新

全局安装cordova npm install –g cordova 全局安装热更新cli npm install -g cordova-hot-code-push-cli android热更新步骤 创建cordova项目 Cordova create cordova-hot-push 安装热更新插件 cordova plugin add cordova-...

Linux中的输入输出重定向

  有三个最重要的输入输出流:标准输入(stdin),标准输出(stdout),标准错误(stderr)。它们对于控制台(“控制台”指的是键盘用于输入,屏幕用于输出)来说是缺省的,但是它们可以被重定向。   重定向标准输出:可以使用“>”符号, 举例:   dir my_dir > filelisting.txt                ...