美文网首页VueJs
webpack 在打包时在访问打包里面的index时,出现路径错

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

作者: glory_前端 | 来源:发表于2017-08-02 17:02 被阅读0次

    在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]')
            }
          }
        ]
      }
    

    相关文章

      网友评论

        本文标题:webpack 在打包时在访问打包里面的index时,出现路径错

        本文链接:https://www.haomeiwen.com/subject/nykylxtx.html