Vue开发踩坑及自救纪实

• 多个组件的样式表中存在同名class导致排版混乱

开发模式没问题，发布模式就出现问题，修改成不重复的class名。

 

• 使用本地路径图片

如果静态资源统一使用网络路径是最简单的解决办法

本地路径解决办法小结：

Webpack配置

// build结果目标根目录
assetsRoot: path.resolve(__dirname, '../dist'),
// 静态资源根目录
assetsSubDirectory: './static/',
// 网络访问地址
assetsPublicPath: '/path/',

静态资源

用本地相对路径

动态资源

在代码内使用require(相对路径)

 

• 各种nodejs包兼容问题

const gzipHeader = Buffer.from([0x1f, 0x8b])

升级node版本，别用nodejs-legacy

 

• 一堆webpack插件不兼容问题

text-extract-plugin不支持webpak4

升级为extract-text-webpack-plugin@next

或者改用mini-css-extract-plugin

 

• Vue文件内置Style问题

{
  test: /\.vue$/,
  loader: 'vue-loader',
  // options: vueLoaderConfig
  options:{
    loaders:{
        css:[
            'vue-style-loader',
            'mini-css-extract-plugin',
            'css-loader'
        ]
      }
  }
}

 

 

组件内加载store为undefined

原因还没找到，临时处理方法

Vue.prototype.$store = store;

 

npm编译时消耗资源过大

暂时没有解决方案