In my Vue 3 application, I have a variety of static assets that are organized in their own file structure separate from the app's source directory. Fortunately, my web server is configured to serve files from both the Vue build directory and the static assets directory without any issues.
However, the Vue compiler seems to be struggling with this setup. It attempts to resolve paths and copy assets to the build directory. This becomes problematic when using absolute paths as the compiler fails to locate the assets and crashes.
Desired Outcome
I prefer for the Vue compiler to only generate css and js files, rather than including static files in the build directory. When the compiler encounters a reference to a static file like:
<style lang="scss">
.hero {
background-image: url('/images/background.jpg');
}
</style>
it should not try to move /images/background.jpg to the build directory. Instead, it should assume that I have already placed the file in its correct location.
Current Configuration
Currently, my setup involves using Vue 3 and Webpack 5. My webpack.config.js looks like this:
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' ),
},
}