Recently, I reorganized my component setup by implementing a multi-file structure:
src/components/ui/navbar/
Navbar.component.ts
navbar.html
navbar.scss
Within the navbar.html file, there was an issue with a base64-encoded image <img />, which prompted me to externalize it into a separate multi-file component.
<div class="navbar-header">
<router-link tag="a" to="/home" class="navbar-brand" href="#" title="CompanyName">
<img class="img-fluid" src="./assets/logo.png" alt="CompanyName">
</router-link>
</div>
Upon checking the dist/ folder, I realized that the logo.png file was missing. Furthermore, the final output no longer contained the base64 version of the image.
This led me to believe that there might be a configuration missing in the vue.config.js file to handle multi-file components (similar to Angular), but I couldn't find relevant information online.
Below is part of the current configuration I have, with certain sections commented out during testing:
module.exports = {
chainWebpack: config => {
if (process.env.NODE_ENV === "development") {
config
.output
.filename("[name].[hash].js")
.end();
}
},
chainWebpack: config => {
config.module
.rule("vue")
.use("vue-svg-inline-loader")
.loader("vue-svg-inline-loader")
.options({ /* ... */ });
},
configureWebpack: {
module: {
rules: [
{
exclude: /index.html/,
loader: "vue-template-loader",
options: {
transformToRequire: {
// The key should be element name,
// the value should be attribute name or its array
img: "src",
},
},
test: /.html$/,
},
/*{
loader: "file-loader",
options: {
name: "[name].[ext]?[hash]",
},
test: /\.(png|jpg|gif|svg)$/,
},*/
/*{
test: /\.(svg)(\?.*)?$/,
use: [
{
loader: "svg-inline-loader",
options: {
limit: 10000,
name: "assets/img/[name].[hash:7].[ext]",
},
},
],
},*/
],
},
},
publicPath: "/",
};
To address the issue, I resorted to a CSS workaround for embedding the graphic. However, any tips related to Webpack/Vue.config.js would be greatly appreciated.
I've tried various path combinations such as ../../, ../, ./ along with @/ and ~/ before the image file location.