Vue-cli-3 "npm运行构建/监视“：我想要相同的outputDir用于WordPress主题。

Question

我正在尝试为outputDir和npm run watch命令获取相同的npm run build (和publicPath)。

我试图使用vue-cli来创建可以在我的WordPress主题中使用的组件。我的主题将通过道具传递组件所需的数据。因此，如果我可以使用npm构建各种组件，然后将它们输出到文件夹中，那么我所要做的就是在Vue组件中更改某些内容时，只需点击刷新即可。

到目前为止，我在vue.config.js中有这一点，但是它只适用于npm run build，它包含了我不想要的SPA的所有其他东西。

// vue.config.js
const path = require('path')

module.exports = {
    publicPath: '/wp-content/themes/wvd/dist/',
    outputDir: path.resolve(__dirname, "../../dist"),
    filenameHashing: false,
    chainWebpack: config => {
        config.optimization.delete('splitChunks')
    }
}

有什么方法可以配置这个，这样我就可以将app.js和app.css放在...../dist文件夹中，而不需要npm run build和npm run watch的所有其他SPA内容。

谢谢。:)

Answer 1

所以我在前一段时间所做的就是添加到package.json中

{
  ...,
  scripts: {
    ...,
    'watch' : 'vue-cli-service build --watch --inline-vue',
    ...,
  }
}

在vue.config.js中使用下列设置时

module.exports = {
  'publicPath': '/wp-content/themes/my_theme/dist/js',
  'outputDir': '../dist',
  'filenameHashing': false,
  runtimeCompiler: true,
  'css': {
    extract: true,
  },
}

我想我应该在这里更新一下以防有人也这么做。