时间戳

首页 > 解决方案 > Vue-cli-3 “npm run build/watch”：我想要 WordPress 主题的相同 outputDir

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

问题描述

我试图为 and 命令获得相同的outputDir（和publicPath） 。npm run buildnpm 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而没有所有其他 SPA 的东西和？app.css...../distnpm run buildnpm run watch

谢谢。:)

标签： webpackvue-clivue-cli-3

解决方案

所以我不久前最终做的是添加到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,
  },
}

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

推荐阅读