ThinkPHP5框架引入的css等外部资源文件没有生效
静态资源文件一般是放在public目录里，不只是css，只要是静态资源文件都没有显示出来。
（更好的阅读体验可访问 这里 ）
问题陈述
文件结构
文件内容
三个文件分别为：Index.php、test.html、test.css
//Index.php
<?php
namespace app\index\controller;
use think\Controller;
class Index extends Controller
{
public function index()
{
return $this->fetch();
}
}
<!--index.html-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>This is the test</title>
<link rel="stylesheet" href="/static/test.css">
</head>
<body>
<h1>Hello World</h1>
</body>
</html>
/*test.css*/
h1 {
color: red;
}
为了方便问题陈述，使用了虚拟主机。集成环境为xampp，不使用也可，本质上都是一样的。不能配置虚拟主机可参考最后的方法
虚拟主机的配置
- 找到服务器
apache\conf\extra\httpd-vhosts.conf文件，配置以下内容
最重要的就是标记的两行，可见我把 服务器名（ServerName）test.io 映射到了 我的项目文件 test目录 - 配置host文件，完成域名 test.io 到本地服务器 127.0.0.1 的映射
用管理员打开C:\Windows\System32\drivers\etc\hosts文件，在末尾添加
- 重启服务器，在浏览器输入 http://test.io/public/ 就直接访问到了我们的test项目文件。
出现的问题
也就才开始显示出本文的重点：我们之前引入的 test.css 没有生效
原因分析
我们在引入 css 文件的时候，使用的是<link rel="stylesheet" href="/static/test.css">
可见，我们默认是把 public目录 作为根目录来使用的（ /static 在 public 目录下）
而我们在配置虚拟主机的时候，使用的是DocumentRoot "C:/xampp/htdocs/www/test/" 是把 test 项目文件作为根目录使用。代码使用的根目录与项目实际根目录不在同一位置。所以，引入的文件不能正确的显示出来。
解决方法
修改虚拟主机对应的目录为
DocumentRoot "C:/xampp/htdocs/www/test/public/，把根目录直接映射到public目录，重启服务器。这样就可以在 html 文件里直接使用 /static 来引入静态资源文件。
最终的效果：
修改html 引入外部文件的代码为：
<link rel="stylesheet" href="/public/static/test.css">，这样也能使用引入的文件，不过自然是麻烦一些。
最终的效果：
如果没有配置虚拟主机，在浏览器直接输入的 127.0.0.1，可根据显示出的内容，自行判断所处的位置，然后调整代码或修改配置文件。
例如：如果出现的是这种
发现直接定位的是项目主文件。那么就需要在代码中这样使用：<link rel="stylesheet" href="/public/static/test.css">。然后点击 public/ 即可正确显示。反之，如果直接显示出了页面，就不用再加 /public 了。
ThinkPHP5框架引入的css等外部资源文件没有生效的更多相关文章
- 关于IDEA每次修改HTML,Css等静态资源文件都需要重启的设置修改
~ ~ ~ ~ ~ 关于IDEA每次修改HTML,Css等静态资源文件都需要重启的设置修改 最近开始使用IDEA进行项目开发,但是对于每次修改HTML文件中css和js文件之后都必须重启服务这件事表示 ...
- spark-submit --files 动态加载外部资源文件
在做spark时,有些时候需要加载资源文件,需要在driver或者worker端访问.在client模式下可以使用IO流直接读取,但是在cluster模式下却不能直接读取,需要如下代码: val is ...
- Spark动态加载外部资源文件
Spark动态加载外部资源文件 1.spark-submit --files 动态加载外部资源文件 之前做一个关于Spark的项目时,因项目中需要读取某个静态资源文件,然后在本地IDEA测试一切皆正常 ...
- css文件内引用外部资源文件的相对路径
1.default.css文件内容(位于css文件夹下): .ClassName .ClassName .ClassName .page-sidebar .sidebar-search .submit ...
- Nuget包含css\js等资源文件
<Project Sdk="Microsoft.NET.Sdk"> <PropertyGroup> <TargetFramework>netst ...
- WPF Demo9外部资源文件
<Window x:Class="Demos.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/ ...
- robot framework学习笔记之一 资源文件（Resource）和外部资源（External Resources）
一.资源文件(Resource) 测试套件主要是存放测试案例,资源文件主要是用来存放用户关键字. 添加资源 在目录型的Project/Test Suite下单击鼠标右键,选择『New Resou ...
- 实现iOS图片等资源文件的热更新化(零): 序
必要的序 以后在写系列文章,准备把基本的规划和动机等,单独作为一个小的序言部分给独立出来.序言部分,可以较为完整地交待系列文章的写作动机,所展示的编码技术可能的应用场景等.个人,我还是比较看重文章或者 ...
- Webpack 使用url-loader和file-loader打包资源文件
在js中不仅可以通过import引入js文件,还可以引入图片.视频等资源文件,这样webpack打包时就会把所引入的资源文件也一起打包进来 打包进来的文件会返回一个字符串:即文件的路径 要做到这一点, ...
随机推荐
- [Taro] 解决 使用 Taro UI 小程序下 Iconfont 图标 不显示问题
Taro UI 配置 第三方 的 文档 配置即可解决 https://taro-ui.jd.com/#/docs/icon 解决问题: 之前 只有在H5下 才显示 Iconfont 图标 后来按照此文 ...
- 前端Vue项目——初始化及导航栏
一.项目初始化 创建webpack模板项目如下所示: MacBook-Pro:PycharmProjects hqs$ vue init webpack luffy_project ? Project ...
- du和ls的区别：如何正确计算文件大小
上一篇文章写到的权限检查脚本,后来我又加入了 apk size 对比的功能,分享给组内同事使用后,暴露出一个问题:脚本输出的 apk size 和 Jenkins 出包信息以及电脑上显示的存储大小都有 ...
- [LeetCode] 382. Linked List Random Node 链表随机节点
Given a singly linked list, return a random node's value from the linked list. Each node must have t ...
- 关于Dev-C++用户所必须知道的知识
开启这几个警告选项,才能拥有GCC编译器的较为全面的报错和警告 另外,目前Dev-C早已停止更新(停滞在版本号5.1,内置的GCC为4.9版本),且使用其检测数组变量也挺麻烦的,实在不推荐使用.
- DVWA Command Injection 通关教程
Command Injection 介绍 命令注入(Command Injection),对一些函数的参数没有做过滤或过滤不严导致的,可以执行系统或者应用指令(CMD命令或者bash命令)的一种注入攻 ...
- 通过扫码打开IOS的App Store下载APP(Android版暂时没找到解决方法)
项目需求:扫码根据不同平台下载不同版本的APP.主要是ios和Android. 网上找了很多,前面判断平台的代码很容易找到,但是后面的就有些坑了.有的人的是根本跑不通.有的是代码补全. 下面是 微信扫 ...
- uniApp上传图片
项目中用到了上传图片的功能,记录一下.增强记忆. 要上传图片首先就要先选择图片,或者是先拍照,此时先调用的是 chooseImage 接口,此接口可选择拍照也可以从相册中选择. 它有几个参数,具体可以 ...
- oracle--表空间故障
一,错误问题描述 ERROR: ORA: cannot identify - see DBWR trace file ORA: data : '/u01/oracle/TEST/oratmp01/te ...
- .NetCore 入门篇：理解
(良心转载)原文地址:https://ken.io/note/dotnet-core-qucikstart-preface 一..NET Core的诞生 聊 .NET Core,就不得不说他的爸爸 . ...