Vue set wrong font url in css while packing multi-entries app - vue.js

Question

PROBLEM DESCRIPTION
I am using vue develop a multi-entries app, the project folder is some like:
|- assets
| |- fonts
| | |- a.ttf
| |- styles
| | |- b.css // import ../fonts/a.ttf
|- src
| |- page_one
| | |- App.vue // import ../../assets/styles/b.css
Above project runs well in local deleopment enviroment, but reported 404 for the .ttf resource after deployed on the server. I checked the built product, found that the css font url is incorrect: I got http://<host>/css/fonts/a.ttf, while http://<host>/fonts/a.ttf is the expected URL.
TRACK the CAUSE
After lots of survey, I found above problem is related to the page entry. Since I got a lot pages, and I wanted to separate them into different folders, so the entries are some like:
// vue.config.js
module.exports = {
pages: {
'a/one': {
filename: 'a/one.html',
},
},
};
After built, the folder is like:
|- dist
| |- css
| | |- a
| | | |- one-<hash>.css // import ../fonts/a.ttf
| |- fonts
| | |- a.ttf
ROOT REASON: The pack tool (webpack) output css file in subfoler a/one-<hash>.css, while the url in css file is incorrect. Looks webpack supposed css file is directly placed at css folder.
SOLUTION: DO NOT USE / IN ENTRY. A correct configuration file is like:
// vue.config.js
module.exports = {
pages: {
'a-one': { // JUST DO NOT USE SLASH.
filename: 'a/one.html', // You can use this to build the produced pages intro separate folders
},
},
};
After all, if you use webpack and meet same problem, the reason and solution should be same.

Answer 1

Remove the '/' from the page entry. Correct:
// vue.config.js
module.exports = {
pages: {
'a-one': { // JUST DO NOT USE SLASH.
filename: 'a/one.html', // You can use this to build the produced pages intro separate folders
},
},
};