在vue项目中引入index.html的外部css样式文件

最新推荐文章于 2025-04-24 12:36:23 发布
最新推荐文章于 2025-04-24 12:36:23 发布
阅读量5.5k 收藏 1
点赞数
CC 4.0 BY-SA版权
分类专栏： vue笔记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/vicky_yongqi/article/details/108402426
本文详细解析了在index.html中遇到的外部CSS引入错误，介绍了如何通过正确配置config文件下的index.js来解决这一问题。重点讲解了assetsSubDirectory和assetsPublicPath的设置，以及在static目录下使用绝对路径引用资源的方法。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

1.报错

在index.html外部引入css报错
在这里插入图片描述
在这里插入图片描述

2.查看

config文件下的index.js：
assetsSubDirectory：除index.html外的静态资源存放的路径
assetsPublicPath：打包后，index.html里引用资源的的相对地址
在这里插入图片描述
static中的文件是完全不被webpack处理的，文件会直接复制到最终目录（dist/static）下。因此引用文件要是绝对路径。

3.成功引入

在这里插入图片描述
在这里插入图片描述

vue项目中引入html项目,vue项目引入外部的base.css的方式
weixin_31531599的博客
06-14 1373
1.在入口js文件main.js中引入，一些公共的样式文件，可以在这里引入。javascriptimport Vue from 'vue'import App from './App' // 引入App这个组件import router from './router' /* 引入路由配置 */import axios from 'axios'import '../static/css/global...
Vue项目中引入外部文件的方法（css、js、less）
12-09
这两天学习了Vue.js ，正好了解了如何引入外部文件的方法，而且很重要，所以，今天添加一点小笔记。 例子中css文件采用bootstrap.css，js文件采用jQuery，less文件用less.less(自定义文件) 步骤一：安装webpack cnpm install webpack -g 步骤二：在src/assets下面新建css、js、less、fonts文件夹，并放入对应文件。 将bootstrap.css放入css目录下，bootstrap.min.js放入js文件下，fonts字体放入fonts目录下 步骤三：安装js依赖 cnpm install jquery --
VUE项目中index.html中引入CSS文件小知识点
御前提笔小书童
06-24 3920
asdfasfdadfaf
Vue3中index.html与app.vue、main.ts三个文件的作用和关系
最新发布
ccysjy的博客
04-24 470
是入口HTML文件，静态页面提供容器。所有Vue组件都会被注入到这里，里面有一个div#app，这是Vue的地方。是根组件，是内容的核心，App.vue作为根组件，包含应用的整体布局和结构。是应用的入口脚本，是桥梁，负责初始化Vue实例并挂载到DOM，负责导入必要的库、配置应用（比如路由、状态管理）并启动应用。
html引入本地css样式无效,vue在index.html里面引入css文件样式加载失败
weixin_29247219的博客
06-16 2820
问题描述我在vue的index.html里面引入本地的第三方CSS文件，浏览器会出现一个提示，同时样式也没有生效问题出现的环境背景及自己尝试过哪些方法网上搜索了一下说是什么拦截器的问题，但没有找到和vue相关的修改方法相关代码(额，segmentfault的规定，让我必须把代码写在这里，手动滑稽)你期待的结果是什么？实际看到的错误信息又是什么？希望大神帮忙解惑，谢谢了。更新： 恩，试了楼下二位的办...
vue中引用html文件,Vue中引入样式文件的方法
weixin_42312133的博客
06-18 3841
一、在vue中使用scss首先进行安装如下依赖：cnpm i sass-loader node-sass -D二、vue中引入样式文件1)在index.html模板html文件中引入，这种方式引入的原样编译在生成的html文件中，如果想要通过link引入外部的样式文件，建议使用这种方式：2imis2)在入口js文件main.js中引入，一些公共的样式文件，可以在这里引入。这里会对scss文件进行解...
Vue项目在index.html中引入css文件不生效
Ltp_Ltp的博客
04-19 3580
1、浏览器报错信息 Resource interpreted as Stylesheet but transferred with MIME type text/html: "http://localhost:8080/static/css/bootstrap.css". 2、正常引入css文件 在config目录下的 index.js 里面说明了index.html需要引用的静态资...
Vue中引入样式文件的方法
12-03
在Vue项目中，引入样式文件是一项基础且重要的工作，它能帮助我们更好地组织和管理项目的样式。本篇文章主要探讨如何在Vue中引入样式文件，尤其是SCSS这种预处理器的使用方法。 首先，为了在Vue中使用SCSS，我们...
详谈Vue.js框架下main.js,App.vue,page/index.vue之间的区别
10-14
1. **index.html** - 这是项目的入口文件，它通常包含一个`<div id="app">`作为Vue实例挂载的根元素。 2. **src** - 这个目录包含了所有自定义的源代码，如组件、样式和配置。 3. **node_modules** - 存储项目依赖的...
vue项目中的index.html什么作用
03-08
在Vue项目中，`index.html` 是整个应用的外壳页面，起到了承载Vue应用程序的重要作用[^1]。此文件位于项目的公共目录下，在构建过程中不会被编译器处理，而是直接复制到最终打包后的静态资源目录。 #### 作为HTML...
在vue项目中引入高德地图及其UI组件的方法
10-18
集成的第一步通常是在项目的入口文件index.html中添加高德地图的JavaScript API引用。具体操作是在index.html文件中添加一个标签，其src属性为高德地图API的地址，并将申请到的API Key填入到URL中，格式为：***你的...
vue导入css及页面index.vue分布引入
qq_57042661的博客
03-31 1629
1.import引入 2.用组件的方式插入
VUE2中引入外部css文件的方式
m0_66051368的博客
03-05 6124
利用 @import 关键词引入, 此方式是一个全局引入 scr 路径引入 在 JS 中引入外部css模块 <template> <div></div> </template> <script> // 在JS中引入 外部css模块 import './assets/my.scss' // 与@import效果相同, 会影响所有组件 </script> // 方式2: 此..
vue项目优化 配置CDN加速
Passerby_K的博客
04-24 919
在 vue.config.js 文件中配置如下： // 设置cdn 资源 const cdn = { // 忽略打包的第三方库 /** * externals 对象属性解析： * '包名' : '在项目中引入的名字' * 以element-ui举例 我再main.js里是以 * import ELEMENT from 'element-ui' * Vue.use(ELEMENT, { size: 'small' }) * 这样引入的，所以我的externals的属性值应该是E
vue.config.js关于引入css的配置
weixin_47667133的博客
08-19 5079
每次使用公用的变量和mixin的时候需要单独引入到文件中。 解决方法： 使用vuecli的style-resoures-loader插件来完成自动注入到每个less文件或者vue组件中style标签中。 在当前项目下执行一下命令vue add style-resources-loader，添加一个vuecli的插件 安装完毕后会在vue.config.js中自动添加配置，如下： pluginOptions: { 'style-resources-loader': { preProce
index.html 测试页面,CSS教程:网页布局定位及z-index解释
weixin_35934226的博客
06-04 1102
声明定位元素：position属性值设置除默认值static以外的元素，包括relative，absolute，fixed。平台：win/IE win/FFz-index用来确定定位元素在垂直于显示屏方向(以下称为Z轴)上的层叠顺序值：auto | 整数 | inherit默认：auto适用于：定位元素继承性：no理解stacking context每个box都归属于一个stacking cont...
Vue脚手架项目引入全局css样式文件
记录学习编程的日常
02-24 4757
1、把需要引入的css文件放在项目的public目录里。 2、在项目的public目录里的index.html中的<head>便签里引入css静态文件。 3、假如你需要引入的css文件名叫index.css，则引入方式为：<link rel="stylesheet" href="<%= BASE_URL %>index.css"> 4、注意事项：引入时必须使用<%= BASE_URL %>，否则，无论使用绝对路径还是相对路径引入，都不会引入成功，切记！切记！
[C1进阶之路-Web基础] CSS引入方式
Nick 的笔记
04-10 819
​ 🍹欢迎各路大佬来到 Nick 主页指点 ☀️本期文章将学习 [C1进阶之路-Web基础] CSS引入方式，我是博主Nick。✨ ✨我的博客主页：Nick_Bears 🌹꧔ꦿ 🌹꧔ꦿ博文内容如对您有所帮助，还请给个点赞 + 关注 + 收藏✨ 🍋 注：资料来源于C1进阶考试资料 ​
如何在VUE单页面引入CSS、JS（CDN链接）
一片天空
05-12 2181
可以有以下几个方法，关键看希望在什么环境下使用 1. JS/CSS想在全局使用，可以通过npm 安装后在main.js中引入，或在index.html中引入，这种大多不必说 2. 想在单页面使用，而又不想通npm安装，那个可以通过创建一个component的方式来引入，如下 <template> <div id="baseReport" > <remote-css href="https://cdn.bootcss.com/twitter-bootstrap/4.2
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值