解决VUE项目在IIS部署出现：Uncaught SyntaxError: Unexpected token ＜报错

更新时间：2022年04月25日 16:28:25 作者：農碼一生

这篇文章介绍了解决VUE项目在IIS部署出现：Uncaught SyntaxError: Unexpected token ＜报错的方法，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

一、第一个解决方法是把mode改成history这个问题就会消失

二、第二个解决方法是publicPath设置成’/’,不能是’./’

const publicPath='';
module.exports = {
  // publicPath: process.env.NODE_ENV === 'production' ? '/lucky-draw' : '/'
  publicPath: `/${publicPath}`
};

三、报错404 Not Found,请重写url

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

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

到此这篇关于解决VUE项目在IIS部署出现：Uncaught SyntaxError: Unexpected token ＜报错的文章就介绍到这了。希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

Vue3和Vite不得不说的那些事
这篇文章主要为大家详细介绍了Vue3和Vite的那些事，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助
2022-02-02
Vue3公共组件的main.js的作用、常用代码解析
在Vue3中,公共组件的main.js文件扮演着非常重要的角色,它的作用主要体现在：注册全局组件、引入公共样式、引入Vue、引入组件、创建Vue实例、挂载实例,本文将围绕Vue3公共组件的main.js文件进行详细的阐述,包括其作用、常用代码等方面
2023-08-08
Vue3文件下载方法实现的简单代码
在Web开发中,文件下载可通过多种方式实现,下面这篇文章主要介绍了Vue3文件下载方法实现的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下
2024-10-10
vue如何解决axios请求前端跨域问题
vue项目中,前端使用axios与后台进行数据请求或者提交的时候,如果后台没有设置跨域,浏览器做数据请求的时候就会报错,这篇文章主要给大家介绍了关于vue如何解决axios请求前端跨域问题的相关资料,需要的朋友可以参考下
2021-10-10
vue组件封装实现抽奖随机数
这篇文章主要为大家详细介绍了vue组件封装实现抽奖随机数，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-03-03
vscode中prettier和eslint换行缩进冲突的问题
这篇文章主要介绍了vscode中prettier和eslint换行缩进冲突的问题及解决,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2023-10-10
vue 组件使用中的一些细节点
这篇文章主要介绍了vue 组件使用中的一些细节点，大概有两大细节点，本文通过基础实例给大家介绍的非常详细，需要的朋友参考下吧
2018-04-04
浅谈Vue.nextTick 的实现方法
本篇文章主要介绍了Vue.nextTick 的实现方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-10-10
vue3中$refs的基本使用方法
在Vue中一般很少会用到直接操作DOM，但不可避免有时候需要用到，这时我们可以通过ref和$refs这两个来实现,下面这篇文章主要给大家介绍了关于vue3中$refs的基本使用方法,需要的朋友可以参考下
2022-03-03
vue过滤器实现日期格式化的案例分析
这篇文章主要介绍了vue过滤器实现日期格式化的案例分析，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
2020-07-07