在vue项目npm run build后,index.html中引入css和js 报MIME type问题

问题:

1.在vue项目中,build打包后,index页面打开会报错, MIME type (‘text/html‘) ;报错内容:because its MIME type (‘text/html‘) is not a supported stylesheet MIME type2.控制台报错:报错内容:http://127.0.0.1:5500/static/css/app.04f46711e76646577281177c721d6432.css 这个地址Cannot GET

解决思路:

1.是否是引入没有添加type=text/css rel="stylesheet" rel="stylesheet" type=text/javascript否,past!

2.是否是资源被拦截了或者没有找到
在浏览器中打开样式地址,yes,没找到
3.那么:
这是路径问题,导致资源加载失败,更改配置把引用publicPath改成相对引用 PublicPath: ‘./‘ ,重新build,搞定。

总结:

一般这种问题不会是我们代码不严谨的问题,根源大概率出现在:被拦截或者路径没有配对。

原文地址:https://www.cnblogs.com/ziChin/p/10271069.html

时间: 2024-11-13 09:09:29

在vue项目npm run build后,index.html中引入css和js 报MIME type问题的相关文章

vue-cli构建项目 npm run build后应该怎么运行在本地查看效果

问题来啦 运行npm run dev以开发模式打开调试好了你的案例程序:你还不满足于仅仅把代码放在github上,想直接能把案例效果build版本的代码在本地预览或者放在你的个人博客上供大家直接看效果学习. 这时如果直接运行npn run build是可以运行并打包你的代码的,不会报任何异常或错误,但是你会看到你的命令行打包完成有这样一句提示: 估计看到这里你是不是第一感觉说:不是警告色,说明应该没啥问题吧,(也许是英语不过关也许是懒得不想看反正是没看这段提示是什么意思)抱着试试看的侥幸心理,默

vue-cli 项目中绝对路径引用的相关资源 npm run build 后 打开页面报404错误

在项目中.通过vue-cli 搭建的项目,npm run dev时,以绝对路径引用的相关资源在npm run build 后,页面打开报相关资源404错误: 解决方法如下: 打开build/utils.js,在图中相应位置加入红框内容,其中值可能会有不同,若不同,自己配置成相应的即可. 原文地址:https://www.cnblogs.com/xzma/p/9162584.html

vue 关于npm run build 的小问题

vue项目使用npm run build命令进行打包操作,打包之后试运行报错,报错为: 且命令行警告信息为: 解决办法: 找到项目目录下的config文件夹里的index.js文件,将build对象下的assetsPublicPath中的"/",改为"./"即可,就在前面加个点就可以了, 再次运行命令行: npm run build,将打包好的dist文件放到本地服务器下,浏览器打开对应地址即可. PS: 查看打包后dist 文件是否可以正常运行有一个前提,需要将d

vue项目npm run dev报错events.js:160 throw er; // Unhandled 'error' event listen EADDRINUSE :::8002

出错情况,如下图: 报错原因: listen EADDRINUSE :::8002 意思是当前8002端口被占用 解决办法: 一:简单粗暴:关掉可能影响的相关程序,重新执行启动. 二: 1.Win+R,cmd查询使用的端口号是否被占用: 输入命令:netstat -aon|findstr "8002" 按回车显示占用8080端口对应的程序的PID号:如下图: 2.根据PID号找到对应的程序: 输入命令:tasklist|findstr "12452" 按回车后显示出

Vue - 如何使用npm run build后的dist文件夹

脚手架vue cli生成项目后,使用 npm run build 生成了一个dist文件夹(应该是distribution的缩写) 只要放在http服务器上就可以运行. 使用一句python命令可以搭建http服务器 python -m http.server --directory . 原文地址:https://www.cnblogs.com/allen2333/p/10257640.html

vue项目 npm run dev在Linux 持久运行

touch run.dev.logchmod u+w run.dev.log 记录日志文件 nohup npm run dev > run.dev.log 2>run.dev.log & exit 一定要控制台执行exit 不记录日志 nohup npm run dev >/dev/null 2>&1 & exit 结束持久npm run dev 查看端口号8080 杀死进程 kill -9 9071 原文地址:https://www.cnblogs.com

npm run build 打包后,如何运行在本地查看效果

目前,使用vue-cli脚手架写了一个前端项目,之前一直是使用npm run dev 在8080端口上进行本地调试.项目已经进行一半了,今天有时间突然想使用npm run build进行上线打包,试试能否成功看到我的项目效果.一开始是毫无头绪,什么都不懂,直接是就在命令行上敲下:npm run build命令. 好开心啊,竟然没有报错.以为就这么简单的成功了,在浏览器上输入:http://localhost/MGT/learnVuex/dist/index.html,一片空白.果然没有那么顺利.

VUE-CLI Vue安装及开发,npm run build无法查看项目的问题

Vue-cli 本地安装vue项目 需要安装node.js,用node命令行npm的方式安装Vue 步骤: 1.进入项目地址安装 npm install vue-cli -g 2.初始化一下 ESlink e2e等是测试工具,经常会报一些vue语法等错误,有时会比较麻烦,可以关闭 3.再安装依赖 npm install npm安装建议挂VPN,不然很慢而且容易出错,不能挂VPN的话可以用cnpm的方式安装国内镜像 4.安装成功直接打开了首页 5.运行 npm run dev 6.项目编译 npm

npm run build打包后自定义动画没有执行

问题描述:在vue项目中,当你自己写了一些自定义动画效果,然后你npm run build打包项目放到线上环境后,发现动画并没有效果. 解决办法:在vue项目中找到build文件夹下的vue-loader.conf.js,将extract字段的值改为false,再打包上线,就ok了! 原文地址:https://www.cnblogs.com/duanyue/p/9353903.html