关于vue-cli打包的问题

Question

如图1，config里index.js的assetsPublicPath 已经改为“./”，为什么打包后打开dist里的index.html报错（如图2）？

Answer 1

./ 改成 /

Answer 2

这三张图片 是在本地的吗?其他的呢? 你看下 netweok里面的请求路径 是不是你这三张图片的路径？

Answer 3

build 下面的 utils 文件

  function generateLoaders (loader, loaderOptions) {
    var loaders = [cssLoader];
    if (loader) {
      loaders.push({
        loader: loader + '-loader',
        options: Object.assign({}, loaderOptions, {
          sourceMap: options.sourceMap
        })
      });
    }

    // Extract CSS when that option is specified
    // (which is the case during production build)
    
    // 主要是下面的这个  publicPath  你的是因为css那里的资源路径不对
    if (options.extract) {
      return ExtractTextPlugin.extract({
        use: loaders,
        publicPath:'../../',
        fallback: 'vue-style-loader'
      });
    } else {
      return ['vue-style-loader'].concat(loaders);
    }
  }

Answer 4

把图片放到 src 里的 asset 文件夹去

Answer 5

如果你的图片引用正确的话，在webpack.base.config.js里面的图片那个loader加个publicPath: '../../';有时候问题出在你图片放置的路径或者说你引用图片写的路径。

Answer 6

关键还是看你怎么打开的，要根据你的根目录写路径的

Answer 7

config里index.js的assetsPublicPath 已经改为“./”

这是要你放的目录决定的，而不是全部改成这样

Answer 8

https://github.com/smallyunet...

Answer 9

很好解释，建议多了解webpack的打包机制。
看样子你是拿着vue-cli直接使用的对吧，那就以这个为出发点找问题。
问题就是出在assetsPublicPath上。
假设你的出口是dist

    output: {
        publicPath: assetsPublicPath
    }

assetsPublicPath最终会被引用到这里。

举例说明：

    {
        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: utils.assetsPath('img/[name].[hash:7].[ext]')
        }
      }

这是vue-cli的url-loader，它会把图片都打包到./dist/img文件夹下。
publicPath的作用是替换绝对路径。
设置为'./'，最终会以./dist/js/app.js这个app.js为索引，向你所有的js内的资源路径前边加上'./'，这样的对于app.js来说根目录就是js文件夹，是错误的 。根据上边url-loader的配置，js/img是没有的。应该是../js/img。
所以你报错了。
将publicPath填入你服务器的绝对地址才对，这样所有文件的根目录是dist。