page-skeleton-webpack-plugin icon indicating copy to clipboard operation
page-skeleton-webpack-plugin copied to clipboard

本地编译时报错Cannot read property 'html' of undefined、Cannot read property 'url' of undefined

Open wakaka378 opened this issue 4 years ago • 3 comments

Description

本地运行,生成骨架屏页面时,页面空白啥都没有,控制台提示 image

TypeError: Cannot read property 'html' of undefined
    at a.setCode (bundle.4da48e9f37a58e077c95.js:7)
    at fn.e.$emit (bundle.4da48e9f37a58e077c95.js:7)
    at _.de.onmessage (bundle.4da48e9f37a58e077c95.js:7)
    at _.r.dispatchEvent (bundle.4da48e9f37a58e077c95.js:7)
    at bundle.4da48e9f37a58e077c95.js:7
    at Array.forEach (<anonymous>)
    at _._transportMessage (bundle.4da48e9f37a58e077c95.js:7)
    at c.o.emit (bundle.4da48e9f37a58e077c95.js:1)
    at WebSocket.ws.onmessage (bundle.4da48e9f37a58e077c95.js:7)

TypeError: Cannot read property 'url' of undefined
    at a.<anonymous> (bundle.4da48e9f37a58e077c95.js:7)
    at a.e._render (bundle.4da48e9f37a58e077c95.js:7)
    at a.n (bundle.4da48e9f37a58e077c95.js:7)
    at At.get (bundle.4da48e9f37a58e077c95.js:7)
    at At.run (bundle.4da48e9f37a58e077c95.js:7)
    at Mt (bundle.4da48e9f37a58e077c95.js:7)
    at Array.<anonymous> (bundle.4da48e9f37a58e077c95.js:7)
    at Ke (bundle.4da48e9f37a58e077c95.js:7)

Plugin configration

const path = require('path');//引入path模块
const CompressionPlugin = require('compression-webpack-plugin');
const { SkeletonPlugin } = require('page-skeleton-webpack-plugin')
const zopfli = require("@gfx/zopfli");

function resolve(dir) {
  return path.join(__dirname, dir)//path.join(__dirname)设置绝对路径
}

module.exports = {
  publicPath: './',
  outputDir: 'fire',
  assetsDir: 'static',
  productionSourceMap: false,
  devServer: {
    open: true,
    proxy: {
      '/api': {
        target: 'http://192.168.1.164:8080',
        ws: true,
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  },
  chainWebpack: (config) => {
    config.resolve.alias
      .set('@', resolve('./src'))
      .set('components', resolve('./src/components'))
    //set第一个参数:设置的别名,第二个参数:设置的路径
    if (process.env.NODE_ENV === 'production') {
      config.plugin('CompressionPlugin')
        .use(new CompressionPlugin({
          compressionOptions: {
            numiterations: 15,
          },
          filename: "[path].gz[query]",
          algorithm(input, compressionOptions, callback) {
            return zopfli.gzip(input, compressionOptions, callback);
          },
          test: /\.(js|css|json|txt|html|ico|svg)(\?.*)?$/i,
          //threshold: 10240,
          minRatio: 0.8
        }));
      config.plugin('html').tap(opts => {
        opts[0].minify.removeComments = false
        return opts
      })
    }
  },
  configureWebpack: {
    entry: {
      app: './src/main.js'
    },
    externals: {
      'vue': 'Vue',
      'vant': 'vant',
      'vue-router': 'VueRouter',
    },
    plugins: [
      new SkeletonPlugin({
        pathname: path.resolve(__dirname, './shell'), // 用来存储 shell 文件的地址
        staticDir: path.resolve(__dirname, './fire'), // 最好和 `output.path` 相同
        routes: ['/'], // 将需要生成骨架屏的路由添加到数组中
      })
    ],
  }
}

Versions

  • Page Skeleton:"0.10.12"
  • "compression-webpack-plugin": "^4.0.0"
  • @vue/cli 4.4.4
  • router mode: 'history'

wakaka378 avatar Jul 07 '20 08:07 wakaka378

我也是 请问你解决了吗

hzfvictory avatar Jul 23 '20 09:07 hzfvictory

我也是 请问你解决了吗

没 我已经放弃这个没用了

wakaka378 avatar Jul 24 '20 06:07 wakaka378

一摸一样

zhen-one avatar Oct 14 '20 02:10 zhen-one