vue-cli生成的spa项目js、css、fonts、images文件路径找不到

js、css文件找不到

问题分析

run build 命令进行文件编译打包的时候，会将publicPath 加入文件引入路径中，vue-vli默认配置的publicPath='/',路径替换时生成的js、css文件默认路径都会添加/在文件引入路径的最前面。

问题解决

css文件编译生成以后的路径为/static/css/app.[hash:7].css，而其可引入的路径为./static/css/app.[hash:7].css或者static/css/app.[hash:7].css，因此可以将publicPath='' or publicPath='./' or publicPath='[实际线上发布地址]'。

---

fonts文件、背景图片文件找不到

问题分析

run build 命令生成的文件会进行路径替换，对于fonts文件会放在单独的fonts文件夹下，而在css文件中进行fonts文件进行访问的时候会默认访问路径中添加两层路径static/css，背景图片同理，因此会造成找不到对应的文件信息。

问题解决

在进行css文件打包的时候可以为其设置单独的publicPath，在工程文件 build 文件夹下，修改 utils 文件的中 ExtractTextWebpackPlugin 的 publicPath 配置即可

    if (options.extract) {
        return ExtractTextPlugin.extract({
            use: loaders,
            publicPath: '../../',
            fallback: 'vue-style-loader'
        })
    } else {
        return ['vue-style-loader'].concat(loaders)
    }

加上 publicPath: '../../', 配置后重写打包即可。