我有一个 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 主题,并且对应该/可以做些什么来帮助我有任何建议,我将非常感激!
提前致谢!
答案 0 :(得分: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]