在webpack打包時(shí)，npm run build 訪問(wèn)里面的index首頁(yè)，發(fā)現(xiàn)路徑不對(duì)，有時(shí)候是空白頁(yè)。報(bào)錯(cuò)一般就兩種最常見(jiàn)的路徑問(wèn)題1.js,css路徑錯(cuò)誤。2.圖片，ttf,woff,woff2路徑錯(cuò)誤

1.js,cs的路徑錯(cuò)誤

image.png

在代碼結(jié)構(gòu)中發(fā)現(xiàn)引入的js和css的路徑前面有一個(gè)"/"

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.圖片路徑錯(cuò)誤

image.png

解決方法：在build下面的webpack.base.conf.js把 limit 的值 調(diào)的大些 至少比你的字體文件大，完美解決。

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 的值 調(diào)的大些 至少比你的圖片文件大
          name: utils.assetsPath('img/[name].[hash:7].[ext]')
        }
      },
      {
        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
        loader: 'url-loader',
        query: {
          limit: 10000,//將 limit 的值 調(diào)的大些 至少比你的字體文件大
          name: utils.assetsPath('./fonts/[name].[hash:7].[ext]')
        }
      }
    ]
  }