VUE3前端笔记 正确引入外部CSS文件的图片路径

方案一

• 项目文件结构

showme.vue
|-----	dist
		|-----	css
				|-----	app.xxx.css
		|-----	img
				|-----	bg1.xxx.jpg
|----- node_modules
|----- public
|----- src
		|----- assets
			|-----	images
					|----- bg1.jpg
		|----- components
		|----- myplugins
		|----- router
		|----- static
				|----- css
						|----- mystyle.css
		|----- views
				|----- home.vue

• Vue项目主文件home.vue引入外部CSS文件

<style>
  @import "../static/css/mystyle.css";
</style>

• 外部CSS文件路径
  \src\static\css\mystyle.css
• 图片文件路径
  \src\assets\images\bg\bg1.jpg
• CSS中URL使用开发工程的相对路径，即CSS文件与assets目录下图片的相对路径：

#/src/static/css/mystyle.css
#开发工程目录的相对路径
.bg-img {
	background:url(../../assets/images/bg/bg1.jpg) center center no-repeat
}

• Vue编译打包

• 图片文件自动命名保存为
  /dist/img/bg1.xxx.jpg
• style.css自动命名保存为
  /dist/css/app.xxx.css

• 编译后Vue把发布目录的CSS中的URL修改为发布后的实际目录的相对路径

#/dist/css/app.xxx.css
#站点的相对路径
.bg-img{
	background:url(../img/bg1.728e14ad.jpg) 50% no-repeat
}

方案二

• 项目文件结构

showme.vue
|-----	dist
		|-----	css
				|-----	app.xxx.css
		|----- images
				|----- bg2.jpg
|----- node_modules
|----- public
		|----- fonts
		|----- images
				|----- bg2.jpg
		|----- js
|----- src
		|----- assets
		|----- components
		|----- myplugins
		|----- router
		|----- static
				|----- css
						|----- mystyle.css
		|----- views
		|----- App.vue
		|----- main.js

• 外部CSS文件路径
  \src\static\css\mystyle.css
• 图片文件路径
  \public\images\bg\bg2.jpg

图片文件放置在public目录下

• CSS中URL使用发布后的站点绝对路径或相对路径

#/src/static/css/mystyle.css
#/dist/images/bg/bg2.jpg 编译后的图片路径
#站点绝对路径
.bg-img{
	background:url(/images/bg/bg2.jpg) center center no-repeat
}

or

#/src/static/css/mystyle.css
#/dist/images/bg/bg2.jpg 编译后的图片路径
#站点css文件相对路径
.bg-img{
	background:url(../images/bg/bg2.jpg) center center no-repeat
}

• Vue编译打包

• 图片文件及子目录原封不动的复制到站点目录
  /dist/images/bg/bg2.jpg
• mystyle.css自动命名保存为
  /dist/css/app.xxx.css

• 编译后CSS中的URL不会被动，仍然是开发时设置的发布后站点的实际路径

#/dist/css/app.xxx.css
#站点绝对路径
.bg-img{
	background:url(/images/bg/bg2.jpg) center center no-repeat
}

or

#/dist/css/app.xxx.css
#站点css文件相对路径
.bg-img{
	background:url(../images/bg/bg2.jpg) center center no-repeat
}

本章完

---