我的 Vue 3 應用程式參考了許多靜態資產。靜態資產已經設定了自己的檔案結構，恰好位于應用程式源目錄之外。我的 web 服務器已經為此配置了，并且很高興地從 Vue 構建目錄和靜態資產目錄中提供檔案。
然而，Vue 編譯器并不那么高興。當它看到路徑時，它會嘗試決議它并將資產復制到構建目錄。如果我使用絕對路徑，它將找不到資產，然后崩潰并死掉。
要求
我希望 Vue 編譯器只輸出 css 和 js 檔案。我不需要構建目錄中的靜態檔案。如果 Vue 編譯器看到對靜態檔案的參考 - 例如：
<style lang="scss">
.hero {
background-image: url('/images/background.jpg');
}
</style>
它不應該嘗試決議/images/background.jpg并將其復制到構建目錄；它應該假設我已經將檔案放在需要的位置。
當前設定
我正在使用 Vue 3 和 Webpack 5。我webpack.config.js的是
const MiniCssExtractPlugin = require( 'mini-css-extract-plugin' )
const { VueLoaderPlugin } = require( 'vue-loader' )
const path = require( 'path' )
module.exports = {
entry: './src/index.ts',
mode: 'production',
module: {
rules: [ {
test: /\.vue$/,
loader: 'vue-loader'
}, {
test: /\.ts$/,
loader: 'ts-loader',
exclude: /node_modules/,
options: {
appendTsSuffixTo: [ /\.vue$/ ]
}
}, {
test: /\.s?css$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader',
{
loader: "sass-loader",
options: {
additionalData: '@import "@/util/sass/_index.scss";' // import _index.scss to all Vue components
}
}
]
} ]
},
plugins: [
new MiniCssExtractPlugin( {
filename: 'style.css'
} ),
new VueLoaderPlugin(),
],
resolve: {
alias: {
'@': path.resolve( __dirname, 'src' )
},
extensions: [ '.ts', '.scss', '.vue' ],
},
output: {
filename: 'app.js',
path: path.resolve( __dirname, 'build' ),
},
}
uj5u.com熱心網友回復：
你需要告訴 Webpack 禁用資產發射。
默認情況下，資產/資源模塊以 [hash][ext][query] 檔案名發送到輸出目錄。
由于您沒有在 webpack 配置中指定任何有關資產資源的內容，因此它將為每個資源發出一個檔案。
作為旁注，您vue-loader不會修改絕對路徑：
如果你的靜態資源 URL 是用絕對路徑指定的，Vue 將保持原樣
因此，出于您的考慮，請確保在您的 webpack 配置中添加針對您的資產型別的規則。確保此規則是第一個運行（rules陣列中的最后一個）。
//...
module: {
rules: [
//...
{
test: /\.(png|jpe?g|gif|svg|eot|ttf|woff|woff2)$/i,
type: 'asset/resource',
generator: {
emit: false,
},
},
],
},
//...
這是 webpack 參考以獲取更多資訊
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/528411.html