webpack - Vue-cli-3 "npm run build/watch": I want the same outputDir for WordPress theme

Question

我正在尝试为npm 运行构建和npm 运行 watch 命令。

我正在尝试使用 vue-cli 创建可在我的 WordPress 主题中使用的组件。我的主题将通过 Prop 将所需的数据传递给组件。因此，如果我可以使用 npm run watch 构建各种组件，然后将它们输出到 /wp-content/themes/mytheme/js，那将是最方便文件夹，这样当我在 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')
    }
}

有什么方法可以配置它，这样我就可以在 ...../npm run build 和 npm run watch 没有所有其他 SPA 内容的 dist 文件夹？

谢谢。 :)

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,
  },
}

我想我会在这里更新这个以防万一有人试图做同样的事情。