Vue引入本地文件无效

无效的原因是,在webpack打包的设置(/config/index.js)中,指定将静态资源打包到static文件夹下,从而导致路径错误。
Vue引入本地文件无效
解决方法:

  • 将静态资源放在static文件夹下再引入
    – 打包之前
    Vue引入本地文件无效
    – 打包之后
    Vue引入本地文件无效
  • 或者在引入时默认静态资源在static文件夹下
    我在根目录下建立了css文件夹用来装样式文件
    Vue引入本地文件无效
    但是在引入的时候,我认为他已经在static文件夹下了(因为运行时它会被安排在那里)
    Vue引入本地文件无效
    你看,它还在提示,找不到bootstrap.css,因为它现在确实不在static下,但是当运行时(打包后不行,因为webpack会重新组织文件,导致引入失败),它会出现在那里(怎么证明:1.样式生效了 2. 访问http://localhost:8080/static/css/bootstrap.css得到了正确的样式)。
    – 打包后,文件被重新组织,已经看不到bootstrap.css了
    Vue引入本地文件无效

当然是推荐使用第一种啦,直接将静态文件放在static下,举第二个例子是为了更清楚的理解位置变化