vue3+vite项目里行内css样式background-image把服务器图片地址斜杠给编译没了
时间: 2023-12-10 12:37:26 浏览: 45
如果你在 Vue3 + Vite 项目中使用行内 CSS 样式设置 `background-image`,并且服务器图片地址以斜杠开头,则可能会出现编译后图片地址缺少斜杠的问题。
这是因为 Vite 默认使用了基于根路径的静态资源解析方式。如果你使用了以斜杠开头的相对路径,Vite 会将其解析为相对于根路径的路径,因此会缺少斜杠。
为了避免这种情况,你可以在图片地址前面添加 `.`,表示相对于当前路径,如下所示:
```html
<div style="background-image: url(./server/image.png)"></div>
```
或者你也可以使用绝对路径,如下所示:
```html
<div style="background-image: url(/server/image.png)"></div>
```
这样就可以避免编译后图片地址缺少斜杠的问题了。
相关问题
vue3+ts+vite项目使用vue3-seamless-scroll
要在Vue3+TS+Vite项目中使用vue3-seamless-scroll,可以按照以下步骤进行操作:
1. 安装vue3-seamless-scroll
可以使用npm或yarn安装vue3-seamless-scroll:
```bash
npm install vue3-seamless-scroll --save
```
或
```bash
yarn add vue3-seamless-scroll
```
2. 引入vue3-seamless-scroll
在你的Vue组件中引入vue3-seamless-scroll:
```javascript
import { defineComponent } from 'vue'
import Vue3SeamlessScroll from 'vue3-seamless-scroll'
export default defineComponent({
components: {
Vue3SeamlessScroll
}
})
```
3. 使用vue3-seamless-scroll
在你的Vue组件中使用Vue3SeamlessScroll组件:
```html
<template>
<vue3-seamless-scroll>
<div class="item" v-for="item in items" :key="item">{{ item }}</div>
</vue3-seamless-scroll>
</template>
<script>
import { defineComponent } from 'vue'
import Vue3SeamlessScroll from 'vue3-seamless-scroll'
export default defineComponent({
components: {
Vue3SeamlessScroll
},
data() {
return {
items: ['1', '2', '3', '4', '5']
}
}
})
</script>
```
以上就是在Vue3+TS+Vite项目中使用vue3-seamless-scroll的步骤。
vue3+vite使用postcss-px-to-viewport行内样式不转换如何解决
使用`postcss-px-to-viewport`插件转换行内样式需要在`vite.config.js`配置文件中添加`css`相关选项。
具体的配置方法如下:
```javascript
// vite.config.js
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
export default defineConfig({
plugins: [vue()],
css: {
postcss: {
plugins: [
require('postcss-px-to-viewport')({
unitToConvert: 'px',
viewportWidth: 375,
viewportHeight: 667,
unitPrecision: 5,
viewportUnit: 'vw',
selectorBlackList: ['.ignore', '.hairlines'],
minPixelValue: 1,
mediaQuery: false,
replace: true,
exclude: [/node_modules/],
landscape: false,
landscapeUnit: 'vw',
landscapeWidth: 568
})
]
}
}
});
```
在`css`选项中配置`postcss`插件,并且设置`replace`选项为`true`,即可将行内样式也转换为`vw`单位。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)