Recently, I made the switch to Vue 3 CLI. After setting up a Vue project, I installed webpack and included the following file in my project's base directory:
vue.config.js
const webpack = require('webpack')
module.exports = {
configureWebpack: {
plugins: [
new webpack.optimize.LimitChunkCountPlugin({
maxChunks: 1
})
]
},
chainWebpack:
config => {
config.optimization.delete('splitChunks')
}
}
My main objective is to create custom elements using the fantastic module found here: https://github.com/karol-f/vue-custom-element. Everything seems to be functioning as expected, but when I run npm run build, all hrefs in my index.html file are linked to the root directory (href=/css/app.11f77a6e.css), causing the browser to search in locations like:
`file:///C:/css/app.11f77a6e.css`
Is there a way to configure Webpack so that resource links are relative and searched for within the dist folder?
I attempted adding a webpack.config.js file to my project's root directory with the following content:
const path = require('path');
module.exports = {
output: {
path: path.resolve(__dirname, 'dist')
}
}
Unfortunately, this did not solve the issue.
Below is my package.json file:
{
"name": "build-flow",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build"
},
"dependencies": {
"vue": "^2.5.21",
"vue-custom-element": "^3.2.6",
"webpack": "^4.28.4"
},
"devDependencies": {
"@vue/cli-plugin-babel": "^3.3.0",
"@vue/cli-service": "^3.3.0",
"vue-template-compiler": "^2.5.21"
}
}