Vue中静态资源或css文件没有加载出来的说明

• 问题说明

  • 场景1：在Vue.js文件中，你想引入一个css样式文件，你发现引入的路径对的，却始终无法在页面上加载出来。
  • 场景2：你想用一张图片资源放到页面上，但是，尽管你的路径完全写对，但是却死活加载不出来。

• 原因

  • 在Vue中，config目录下的index.js里面说明了index.html需要引用的静态资源路径。

     // Template for index.html
        index: path.resolve(__dirname, '../dist/index.html'),
    
        // Paths
        assetsRoot: path.resolve(__dirname, '../dist'),
        assetsSubDirectory: 'static',
        assetsPublicPath: '/',
    

    必须放在static目录下面才能引用到。

• 解决方法

  • 将需要引用的css文件放到static目录下就OK了。