在 vue 项目中将 css js 图像文件保存在哪里

Question

I am trying to convert an HTML template into vue project. I am very much confused about where to keep my css js files. Whether it should be in the public directory or it should be in the src directory?

Answer 1

you can keep your CSS and Js file inside the src directory rather than public. public is used for keeping your static file such as static JSON, image, etc. which will not go through webpack.

Answer 2

Inside src/assests paste your css, fonts and image folders like here

then make sure to include them in main.js/ts eg.

    import 'bootstrap'
    import 'bootstrap/dist/css/bootstrap.min.css' //boostarp
    import './assets/css/materialdesignicons.min.css'
    import './assets/css/tiny-slider.css'
    import './assets/css/style.css'
    import './assets/css/colors/default.css'

if it uses boostrap install npm install bootstrap as you will have to inlude them as I have shown above. as per Bootstrap Doc .

NB: Vue3 does not support boostarp 4, and vue-boostrap use boostrap 5 instaed