webpack 在打包时在访问打包里面的index时，出现路径错误

在webpack打包时，npm run build 访问里面的index首页，发现路径不对，有时候是空白页。报错一般就两种最常见的路径问题1.js,css路径错误。2.图片，ttf,woff,woff2路径错误

1.js,cs的路径错误

image.png

在代码结构中发现引入的js和css的路径前面有一个"/"

image.png

解决方法：在config下面的index.js把

   assetsPublicPath: '/',  修改为：   assetsPublicPath: './',

// see http://vuejs-templates.github.io/webpack for documentation.
var path = require('path')

module.exports = {
  build: {
    env: require('./prod.env'),
    index: path.resolve(__dirname, '../dist/index.html'),
    assetsRoot: path.resolve(__dirname, '../dist'),
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    productionSourceMap: true,
    // Gzip off by default as many popular static hosts such as
    // Surge or Netlify already gzip all static assets for you.
    // Before setting to `true`, make sure to:
    // npm install --save-dev compression-webpack-plugin
    productionGzip: false,
    productionGzipExtensions: ['js', 'css'],
    // Run the build command with an extra argument to
    // View the bundle analyzer report after build finishes:
    // `npm run build --report`
    // Set to `true` or `false` to always turn it on or off
    bundleAnalyzerReport: process.env.npm_config_report
  },

2..ttf .woff .woff2.图片路径错误

image.png

解决方法：在build下面的webpack.base.conf.js把 limit 的值 调的大些 至少比你的字体文件大，完美解决。

module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: vueLoaderConfig
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        include: [resolve('src'), resolve('test')]
      },
      {
        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
        loader: 'url-loader',
        query: {
          limit: 10000, //将 limit 的值 调的大些 至少比你的图片文件大
          name: utils.assetsPath('img/[name].[hash:7].[ext]')
        }
      },
      {
        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
        loader: 'url-loader',
        query: {
          limit: 10000,//将 limit 的值 调的大些 至少比你的字体文件大
          name: utils.assetsPath('./fonts/[name].[hash:7].[ext]')
        }
      }
    ]
  }