Question

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

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

有什么方法可以配置它，以便我可以将app.js文件夹中的app.css和...../dist放在npm run build中，而没有所有其他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运行构建/监视”：我希望WordPress主题具有相同的outputDir

1 个答案: