javascript - vue组件webpack打包部署到服务器报错

问题描述

问 题

使用官方提供的脚手架vue-cli写的代码，写完后执行压缩命令npm run build将dist文件夹部署到服务器端报错,尝试过以下方法还是无法解决，求大神指点。

1.修改了dist中的index.html将路径改为相对路径，结果报错，浏览器调试css和js都引入进来的但是报错

Failed to parse SourceMap:         http://localhost:8081/dist/static/js/app.b928d46b423e0d6e2cda.js.map

2.如果只把dist文件夹中内容丢进服务器，外面没有嵌套一层dist这个文件夹，发现是正常显示的；

3.有人告诉我可能是服务器请求头mime的问题，配置好.map文件后还是报错，应该不是请求头的问题了，不然只丢dist里边的内容是正常显示的呢

百思不得其解，拜求大神指点

解决方案

纠结了我两天天，我自己试了好多次，也算是找到了解决方案。
这个.map文件是追踪用的丢失其实也没啥影响，可以在webpack中去掉，影响的问题在于路由
这个dist连同文件夹丢到根目录的话，访问dist的路径就变成了xxx.com/dist，这个dist路径是不存在的，因为路由并没有设置，所以会默认是没有东西的，自然就没有东西了。
我在那个地方放了一个router-view标签，以为是它没有起作用，其实不是。是因为如果按照这个路由路径是根本不存在的。
最好的方案就是设置路由重定向，如下

router.redirect({
  '*': '/error',//404页面
  '/dist':'/'
});

这篇关于javascript - vue组件webpack打包部署到服务器报错的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！