How can I fully deploy my front end Vue app? - vue.js

Question

My site uses Vue, Bootstrap, and Vuetify. It works locally. I deployed it on Netlify and Heroku with the same result. index.html runs, but not Vue. Bootstrap failed.
Here are 2 methods of deploying Bootstrap that work locally and their links. Method 1 fails.
Import locally.
Netlify
In main.js:
import 'bootstrap'
import 'bootstrap/dist/css/bootstrap.min.css'
Import from a CDN.
Netlify Heroku
In index.html:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css"
integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
Deployment steps:
For Heroku, I followed steps here with the below changes:
Commands I used in step 3:
npm run build
git add .
git commit -m "deploy"
I added a name to the app in step 4.
After deploying to Heroku, I had a dist folder directory. For Netlify, I dragged this to a box that said "Drag and drop your site folder here".
This is in package.json:
"scripts": {
"start": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
Michal Levý's answer worked. I set publicPath when following a tutorial.
I commented it out in vue.config.js.
module.exports = {
"transpileDependencies": [
"vuetify"
],
// publicPath: process.env.NODE_ENV === 'production'
// ? '/skillportfolios/'
// : '/'
}
I got it working here in Netlify, but not Heroku. That's good enough.