vue-cli設置publicPath小記
幾種設置publicPath後，再對比打包後的index.html文件css
測試背景：
- 每次打包build完後，都單獨生成一個
/dist文件夾，且dist中每次都只有相同文件目錄 - 部署的時候，是部署在服務器的一個
/test文件夾下
打包後的文件目錄：
├─dist
├─css
├─img
└─js
index.html
複製代碼
1、不設置publicPath時，部署後請求路徑：http://111.222.333.444:8888/css/app.0b79487b.css
// vue.config.js
module.exports = {
// publicPath: '',
}
複製代碼
<!DOCTYPE html>
<html lang=en>
<head>
<title>test</title>
<link href=/css/app.0b79487b.css rel=preload as=style>
<link href=/js/app.ba2d9b8a.js rel=preload as=script>
<link href=/js/chunk-vendors.e7ac9ff2.js rel=preload as=script>
<link href=/css/app.0b79487b.css rel=stylesheet>
</head>
<body>
<div id=app></div>
<script src=/js/chunk-vendors.e7ac9ff2.js></script>
<script src=/js/app.ba2d9b8a.js></script>
</body>
</html>
複製代碼
2、設置爲/時，部署後請求路徑：http://111.222.333.444:8888/css/app.0b79487b.css
// vue.config.js
module.exports = {
publicPath: '/',
}
複製代碼
<!DOCTYPE html>
<html lang=en>
<head>
<title>test</title>
<link href=/css/app.0b79487b.css rel=preload as=style>
<link href=/js/app.ba2d9b8a.js rel=preload as=script>
<link href=/js/chunk-vendors.e7ac9ff2.js rel=preload as=script>
<link href=/css/app.0b79487b.css rel=stylesheet>
</head>
<body>
<div id=app></div>
<script src=/js/chunk-vendors.e7ac9ff2.js></script>
<script src=/js/app.ba2d9b8a.js></script>
</body>
</html>
複製代碼
3、設置爲./時，部署後請求路徑：http://111.222.333.444:8888/test/css/app.0b79487b.css
// vue.config.js
module.exports = {
publicPath: './',
}
複製代碼
<!DOCTYPE html>
<html lang=en>
<head>
<title>test</title>
<link href=css/app.0b79487b.css rel=preload as=style>
<link href=js/app.8569d42d.js rel=preload as=script>
<link href=js/chunk-vendors.e7ac9ff2.js rel=preload as=script>
<link href=css/app.0b79487b.css rel=stylesheet>
</head>
<body>
<div id=app></div>
<script src=js/chunk-vendors.e7ac9ff2.js></script>
<script src=js/app.8569d42d.js></script>
</body>
</html>
複製代碼
4、設置爲static時，部署後請求路徑：http://111.222.333.444:8888/test/static/css/app.0b79487b.css
// vue.config.js
module.exports = {
publicPath: 'static',
}
複製代碼
<!DOCTYPE html>
<html lang=en>
<head>
<title>test</title>
<link href=static/css/app.0b79487b.css rel=preload as=style>
<link href=static/js/app.d0717808.js rel=preload as=script>
<link href=static/js/chunk-vendors.e7ac9ff2.js rel=preload as=script>
<link href=static/css/app.0b79487b.css rel=stylesheet>
</head>
<body>
<div id=app></div>
<script src=static/js/chunk-vendors.e7ac9ff2.js></script>
<script src=static/js/app.d0717808.js></script>
</body>
</html>
複製代碼
5、設置爲./static時，部署後請求路徑：http://111.222.333.444:8888/test/static/css/app.0b79487b.css
// vue.config.js
module.exports = {
publicPath: './static',
}
複製代碼
<!DOCTYPE html>
<html lang=en>
<head>
<title>test</title>
<link href=static/css/app.0b79487b.css rel=preload as=style>
<link href=static/js/app.d0717808.js rel=preload as=script>
<link href=static/js/chunk-vendors.e7ac9ff2.js rel=preload as=script>
<link href=static/css/app.0b79487b.css rel=stylesheet>
</head>
<body>
<div id=app></div>
<script src=static/js/chunk-vendors.e7ac9ff2.js></script>
<script src=static/js/app.d0717808.js></script>
</body>
</html>
複製代碼
6、設置爲../static時，部署後請求路徑：http://111.222.333.444:8888/static/css/app.0b79487b.css
// vue.config.js
module.exports = {
publicPath: '../static',
}
複製代碼
<!DOCTYPE html>
<html lang=en>
<head>
<title>test</title>
<link href=../static/css/app.0b79487b.css rel=preload as=style>
<link href=../static/js/app.695b7ccc.js rel=preload as=script>
<link href=../static/js/chunk-vendors.e7ac9ff2.js rel=preload as=script>
<link href=../static/css/app.0b79487b.css rel=stylesheet>
</head>
<body>
<div id=app></div>
<script src=../static/js/chunk-vendors.e7ac9ff2.js></script>
<script src=../static/js/app.695b7ccc.js></script>
</body>
</html>
複製代碼
7、設置爲../時，部署後請求路徑：http://111.222.333.444:8888/css/app.0b79487b.css
// vue.config.js
module.exports = {
publicPath: '../',
}
複製代碼
<!DOCTYPE html>
<html lang=en>
<head>
<title>test</title>
<link href=../css/app.0b79487b.css rel=preload as=style>
<link href=../js/app.67ace555.js rel=preload as=script>
<link href=../js/chunk-vendors.e7ac9ff2.js rel=preload as=script>
<link href=../css/app.0b79487b.css rel=stylesheet>
</head>
<body>
<div id=app></div>
<script src=../js/chunk-vendors.e7ac9ff2.js></script>
<script src=../js/app.67ace555.js></script>
</body>
</html>
複製代碼
相關文章
- 1. Webpack中publicPath設置
- 2. webpack4配置(2)-publicPath
- 3. webpack 配置 publicPath的理解
- 4. webpack之publicPath
- 5. webpack output path&publicpath
- 6. webpack學習筆記——publicPath路徑問題
- 7. webpack配置中的path、publicPath和contentBase
- 8. Vue CLI4.0 webpack配置屬性——publicPath
- 9. Webpack中publicPath詳解
- 10. 理解webpack的publicPath
- 更多相關文章...
- • MySQL AS：設置別名 - MySQL教程
- • ASP.NET Razor - 標記 - ASP.NET 教程
- • IntelliJ IDEA代碼格式化設置
- • Tomcat學習筆記（史上最全tomcat學習筆記）
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
- 1. Appium入門
- 2. Spring WebFlux 源碼分析(2)-Netty 服務器啓動服務流程 --TBD
- 3. wxpython入門第六步（高級組件）
- 4. CentOS7.5安裝SVN和可視化管理工具iF.SVNAdmin
- 5. jedis 3.0.1中JedisPoolConfig對象缺少setMaxIdle、setMaxWaitMillis等方法，問題記錄
- 6. 一步一圖一代碼，一定要讓你真正徹底明白紅黑樹
- 7. 2018-04-12—（重點）源碼角度分析Handler運行原理
- 8. Spring AOP源碼詳細解析
- 9. Spring Cloud（1）
- 10. python簡單爬去油價信息發送到公衆號
歡迎關注本站公眾號,獲取更多信息
相關文章