'publicPath' not working for assets with multi-page mode #6394
Description
Version
4.5.12
Environment info
System:
OS: macOS 10.15.7
CPU: (4) x64 Intel(R) Core(TM) i5-7400 CPU @ 3.00GHz
Binaries:
Node: 10.17.0 - ~/.nvm/versions/node/v10.17.0/bin/node
Yarn: 1.22.10 - ~/.nvm/versions/node/v10.17.0/bin/yarn
npm: 6.14.9 - ~/.nvm/versions/node/v10.17.0/bin/npm
Browsers:
Chrome: 89.0.4389.90
Safari: 14.0.3
npmPackages:
@vue/babel-helper-vue-jsx-merge-props: 1.2.1
@vue/babel-helper-vue-transform-on: 1.0.2
@vue/babel-plugin-jsx: 1.0.4
@vue/babel-plugin-transform-vue-jsx: 1.2.1
@vue/babel-preset-app: 4.5.12
@vue/babel-preset-jsx: 1.2.4
@vue/babel-sugar-composition-api-inject-h: 1.2.1
@vue/babel-sugar-composition-api-render-instance: 1.2.4
@vue/babel-sugar-functional-vue: 1.2.2
@vue/babel-sugar-inject-h: 1.2.2
@vue/babel-sugar-v-model: 1.2.3
@vue/babel-sugar-v-on: 1.2.3
@vue/cli-overlay: 4.5.12
@vue/cli-plugin-babel: ~4.5.12 => 4.5.12
@vue/cli-plugin-eslint: ~4.5.12 => 4.5.12
@vue/cli-plugin-router: ~4.5.12 => 4.5.12
@vue/cli-plugin-unit-mocha: ~4.5.12 => 4.5.12
@vue/cli-plugin-vuex: ~4.5.12 => 4.5.12
@vue/cli-service: ~4.5.12 => 4.5.12
@vue/cli-shared-utils: 4.5.12
@vue/component-compiler-utils: 3.2.0
@vue/eslint-config-airbnb: ^5.3.0 => 5.3.0
@vue/preload-webpack-plugin: 1.1.2
@vue/test-utils: ^1.0.3 => 1.1.3
@vue/web-component-wrapper: 1.3.0
eslint-plugin-vue: ^6.2.2 => 6.2.2
vue: ^2.6.11 => 2.6.12
vue-awesome-swiper: ^4.1.1 => 4.1.1
vue-eslint-parser: 7.6.0
vue-hot-reload-api: 2.3.4
vue-iscroll-view: ^1.0.3 => 1.0.3
vue-loader: 15.9.6 (16.2.0)
vue-marquee-text-component: ^1.2.0 => 1.2.0
vue-router: ^3.2.0 => 3.5.1
vue-style-loader: 4.1.3
vue-template-compiler: ^2.6.11 => 2.6.12
vue-template-es2015-compiler: 1.9.1
vue-touch: ^2.0.0-beta.4 => 2.0.0-beta.4
vuex: ^3.4.0 => 3.6.2
vuex-persistedstate: ^3.1.0 => 3.2.0
npmGlobalPackages:
@vue/cli: Not Found
Steps to reproduce
vue.config.js
pages: [
// page options
],
publicPath: '/my/public/path/',What is expected?
assets with absolute path ✅
@font-face{src:url(/my/public/path/static/img/iconfont.0c7b1a87.svg#my_icon_font) format("svg")}What is actually happening?
assets are using relative path ❌
@font-face{src:url(../../static/img/iconfont.0c7b1a87.svg#my_icon_font) format("svg")}temporary solution:
chainWebpack: (config) => {
// fix publicPath for assets
config.module.rule('images').use('url-loader').tap((options) => {
const newOptions = options;
newOptions.publicPath = '/my/public/path/';
return newOptions;
});
config.module.rule('fonts').use('url-loader').tap((options) => {
const newOptions = options;
newOptions.publicPath = '/my/public/path/';
return newOptions;
});
config.module.rule('svg').use('file-loader').tap((options) => {
const newOptions = options;
newOptions.publicPath = '/my/public/path/';
return newOptions;
});