我将 VUE 3 与 Vite 结合使用。我想为 .vue SFC 文件中的样式设置正确的路径配置。

我的组件.vue:

<template>...</template>
<style scoped>
 .my-ele{
   background-image: url("@/background.png");
 }
</style>

在 vite.config.js 我有，

{
base: process.env.APP_ENV === 'development'? '/': '/dist/',
build: {    
   outDir: path.resolve(__dirname, './../dist'),   
   manifest: true,   
   target: 'es2018',   
   rollupOptions: {
       input: '/main.js'
   }
  },
  resolve: {
   alias: {
       vue: 'vue/dist/vue.esm-bundler.js',
       '@':'/E:/www/Project-x/assets'
     }
    }
}

当我运行 Vite 并检查代码时，我看到了路径

background-image: url("/@fs/E:/www/Project-x/asset/background.png");

而不是 Vite 服务器的路径需要是:

background-image: url("http://localhost:3000/@fs/E:/www/Project-x/asset/background.png");

如何配置应用程序？

最佳答案

// vite.config.ts
import { defineConfig } from 'vite'
import { resolve } from 'path'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [
    vue(),
  ],
  resolve: {
    alias: {
      '@': resolve(__dirname, 'asset')
    }
  }
})

https://stackoverflow.com/questions/68563014/