title: 总结Web发开中的相对路径和绝对路径
date: 2017-07-07 8:32:11
tags:
在Node.js项目中NODE_ENV用来表明当前的工作环境（开发环境或生产环境），通过在代码里判断NODE_ENV这来对生产环境和开发环境做不同的处理，比如在开发环境中添加日志功能、mongodb数据库的操作等。
相对路径&绝对路径
直接在浏览器中打开
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<title>Log in - FDL Beta</title>
<link rel="stylesheet" href="/build/login.css">
</head>
<body>
<div id="content" class="react-container"></div>
<script src="/build/login.build.js"></script>
</body>
</html>
如果直接在浏览器中打开.html文件，文件的路径如：file:///C:Work/front-end/dist/login.html
此时<link rel="stylesheet" href="/build/login.css">和<script src="/build/login.build.js"></script>会从根目录c:找文件：
/C:/build/login.css Failed to load resource: net::ERR_FILE_NOT_FOUND
如果是相对路径，则相对html文件打开静态资源
<link rel="stylesheet" href="./build/login.css">
<script src="./build/login.build.js"></script>
在webstorm中启动html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<title>Log in - FDL Beta</title>
<link rel="stylesheet" href="/build/login.css">
</head>
<body>
<div id="content" class="react-container"></div>
<script src="/build/login.build.js"></script>
</body>
</html>
如从工程fms-datalink中启动fms-datalink/front-end/dist/login.html，则其路径是http://localhost:63342/fms-datalink/front-end/dist/login.html?_ijt=c7lmn2l7a9shr9j72oukdbu110。
此时<link rel="stylesheet" href="/build/login.css">和<script src="/build/login.build.js"></script>会从http://localhost:63342/build/login.css拿数据
在dist下启动http-server
在C:\Work\fms-datalink\front-end\dist下启动server
此时dist就是根http://127.0.0.1:8080/，此时<link rel="stylesheet" href="/build/login.css">和<script src="/build/login.build.js"></script>会从``http://localhost:63342/build/login.css`拿数据
网友评论