Question

我有一个 Vue.js 应用程序，它将用作 WordPress 网站的主题，而 wordpress 在与 Vue.js 预期不同的路径上提供资产，这是正常工作的路径：

<img src="src/assets/images/image.svg"/>

但这是有效的：

<img src="/wp-content/themes/theme-name/src/assets/images/image.svg"/>

所以我的问题是我将如何解决这个问题？由于我对 wordpress 如何操作几乎一无所知，除了 REST API 部分，我能做什么。如果可能，我希望 WebPack 翻译这些路径，并且我尝试了 publicPath: '/wp-content/pathtoassets' 技巧，但它似乎不起作用。另外，如果 WebPack 无法做到这一点，我可以在 php 中做一些事情来将此路径作为我的 Vue 主题的全局变量吗？
这是我的 vue.config.js：

const {
  WebpackManifestPlugin
} = require('webpack-manifest-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const ImageMinimizerPlugin = require('image-minimizer-webpack-plugin');
const gifsicle = require('imagemin-gifsicle');
const jpegtran = require('imagemin-jpegtran');
const optipng = require('imagemin-optipng');

module.exports = {
  runtimeCompiler: true,
  // filenameHashing: false,
  productionSourceMap: false,
  chainWebpack: config => {
    config.plugins.delete('preload');
    config.plugins.delete('prefetch');
    config.module.rule('images').use('url-loader');
    config.module.rule('svg').use('file-loader');
  },
  configureWebpack: config => {
    config.output.filename = 'scripts/[name].js';
    config.output.chunkFilename = 'scripts/[name].js';
    config.plugins = [
      ...config.plugins,
      new CopyWebpackPlugin({
        patterns: [{
            from: 'src/assets/fonts',
            to: 'fonts/[name].[ext]',
          },
          {
            from: 'src/assets/images',
            to: 'images/[name].[ext]',
          },
        ],
      }),
      new ImageMinimizerPlugin({
        severityError: 'warning',
        minimizerOptions: {
          plugins: [
            [gifsicle, {
              interlaced: true
            }],
            [jpegtran, {
              progressive: true
            }],
            [optipng, {
              optimizationLevel: 5
            }],
          ],
        },
      }),
      new WebpackManifestPlugin({
        fileName: 'manifest.json',
        basePath: '/dist/',
      }),
    ];
  },
  css: {
    extract: {
      filename: 'styles/[name].css',
      chunkFilename: 'styles/[name].css',
    },
  },
};

此外，我已经能够使用 manifest.json 将我的脚本和样式排入队列，我只是不知道如何使这些资产（如图像或字体）按应有的方式工作。
此外，如果有人看到这一点并使用 Vue.js 作为 WordPress 主题，并且对应该/可以做些什么来帮助我有任何建议，我将非常感激！提前致谢！

Answer 1

好吧，事实证明这就像向加载程序添加 publicPatch 属性一样简单，例如：

config.module
  .rule('svg')
  .use('file-loader')
  .options({
    name: 'images/[name].[ext]',
    publicPath,
  });

publicPath 属性如下：

const [, themeName] = __dirname.match(/\/wp-content\/themes\/([^/]+)/);
const publicPath = isProduction ? `/wp-content/themes/${themeName}/dist/` : '/';

这将编译成我的 .svg 被解析到这个路径：
/wp-content/themes/${themeName}/dist/images/[name].[ext]

如何设置 webpack 将资产路径转换为另一个路径？

1 个答案: