Vue-cli-3 "npm run build/watch"：我想要 WordPress 主题的相同 outputDir

Question

我正在尝试为 npm run build 和 npm run watch 命令。

我正在尝试使用 vue-cli 创建可在我的 WordPress 主题中使用的组件。我的主题将通过道具将所需的数据传递给组件。所以，如果我可以使用 npm 运行 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')
    }
}

有什么方法可以配置它，这样我就可以在 ...../dist 文件夹中只有 app.js 和 app.css，而不需要 [=14] 的所有其他 SPA 内容=] 和 npm run watch?

谢谢。 :)

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

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

Vue-cli-3 "npm run build/watch"：我想要 WordPress 主题的相同 outputDir

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

webpack

vue-cli

vue-cli-3