如何在vue.config.js中向Vue CLI3工程添加PurifyCSS

Question

我是Vue世界的新手，似乎不能成功地将PurifyCSS添加到我和Webpack的Vue CLI3项目中。

我正在使用Bootstrap和Scss，我想通过删除不使用的选择器来减小Bootstrap的大小。我已经尝试了一百万种配置组合，但似乎不能让它工作。

这是我的vue.config.js中的webpack部分：

configureWebpack: {
    plugins: [
        new MiniCssExtractPlugin({
            filename: "[name].css"
        }),
        new PurifyCSSPlugin({
            paths: glob.sync([
                path.join(__dirname, "dist/*.css")                    
            ])
        })
    ]
},

下面是我得到的错误：

Error: Path C:/Users/klas.tarnstrom/Desktop/vue-test-cli/dist/1.43d93af5.css does not exist.
    at C:\Users\klas.tarnstrom\Desktop\vue-test-cli\node_modules\purifycss-webpack\dist\index.js:52:50
    at Array.forEach (<anonymous>)
    at C:\Users\klas.tarnstrom\Desktop\vue-test-cli\node_modules\purifycss-webpack\dist\index.js:51:35
    at SyncHook.eval [as call] (eval at create (C:\Users\klas.tarnstrom\Desktop\vue-test-cli\node_modules\tapable\lib\HookCodeFactory.js:17:12), <anonymous>:11:1)
    at SyncHook.lazyCompileHook [as _call] (C:\Users\klas.tarnstrom\Desktop\vue-test-cli\node_modules\tapable\lib\Hook.js:35:21)
    at Compiler.newCompilation (C:\Users\klas.tarnstrom\Desktop\vue-test-cli\node_modules\webpack\lib\Compiler.js:503:30)
    at hooks.beforeCompile.callAsync.err (C:\Users\klas.tarnstrom\Desktop\vue-test-cli\node_modules\webpack\lib\Compiler.js:540:29)
    at AsyncSeriesHook.eval [as callAsync] (eval at create (C:\Users\klas.tarnstrom\Desktop\vue-test-cli\node_modules\tapable\lib\HookCodeFactory.js:24:12), <anonymous>:6:1)

    at AsyncSeriesHook.lazyCompileHook [as _callAsync] (C:\Users\klas.tarnstrom\Desktop\vue-test-cli\node_modules\tapable\lib\Hook.js:35:21)
    at Compiler.compile (C:\Users\klas.tarnstrom\Desktop\vue-test-cli\node_modules\webpack\lib\Compiler.js:535:28)
    at readRecords.err (C:\Users\klas.tarnstrom\Desktop\vue-test-cli\node_modules\webpack\lib\Compiler.js:274:11)
    at Compiler.readRecords (C:\Users\klas.tarnstrom\Desktop\vue-test-cli\node_modules\webpack\lib\Compiler.js:402:11)
    at hooks.run.callAsync.err (C:\Users\klas.tarnstrom\Desktop\vue-test-cli\node_modules\webpack\lib\Compiler.js:271:10)
    at AsyncSeriesHook.eval [as callAsync] (eval at create (C:\Users\klas.tarnstrom\Desktop\vue-test-cli\node_modules\tapable\lib\HookCodeFactory.js:24:12), <anonymous>:6:1)

    at AsyncSeriesHook.lazyCompileHook [as _callAsync] (C:\Users\klas.tarnstrom\Desktop\vue-test-cli\node_modules\tapable\lib\Hook.js:35:21)
    at hooks.beforeRun.callAsync.err (C:\Users\klas.tarnstrom\Desktop\vue-test-cli\node_modules\webpack\lib\Compiler.js:268:19)

Answer 1

我猜你没有正确配置路径：

  new PurifyCSSPlugin({
    // Give paths to parse for rules. These should be absolute!
    paths: glob.sync([
      path.join(__dirname, './src/index.html'),
      path.join(__dirname, './**/*.vue'),
      path.join(__dirname, './src/**/*.js')
    ])
  })

另外，我不确定你为什么需要这个插件：MiniCssExtractPlugin