在"npm build"的输出中为源路径添加前缀

Question

我使用vue-cli创建了一个小型的vue应用程序。我使用npm run build来生成UI的生产版本，最终得到一堆CSS、js和一个HTML页面文件，其中包含所有这些js和CSS文件。然而，为了应用程序的目的，HTML需要移动到另一个目录，中间件在那里访问它。这就是为什么js和CSS文件的URL需要加前缀，以指向新的direcotry。是否可以在输出HTML文件中为js和CSS文件创建前缀？

以下是package.json:的内容

{
"name": "investmentapp",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"bootstrap": "^4.5.3",
"bootstrap-vue": "^2.18.1",
"core-js": "^3.6.5",
"vue": "^2.6.11",
"vue-class-component": "^7.2.3",
"vue-property-decorator": "^8.4.2"
},
"devDependencies": {
"@typescript-eslint/eslint-plugin": "^2.33.0",
"@typescript-eslint/parser": "^2.33.0",
"@vue/cli-plugin-babel": "~4.5.0",
"@vue/cli-plugin-eslint": "~4.5.0",
"@vue/cli-plugin-typescript": "~4.5.0",
"@vue/cli-service": "~4.5.0",
"@vue/eslint-config-typescript": "^5.0.2",
"eslint": "^6.7.2",
"eslint-plugin-vue": "^6.2.2",
"typescript": "~3.9.3",
"vue-template-compiler": "^2.6.11"
}
}

附言：目前，我已经编写了一个单独的脚本来自动完成这项工作，但我正在寻找一个内置选项。此外，我很想将其构建到npm run serve中。

Answer 1

您可以通过添加一个可以在构建和服务中重用的"复制"脚本来复制package.json脚本中的文件。

"scripts": {
"serve": "vue-cli-service serve && npm run copy",
"build": "vue-cli-service build && npm run copy",
"lint": "vue-cli-service lint",
"copy": "cp src/*.html destinationDir"
},

至于CSS和JS URL的前缀，假设你使用的是webpack，你可以在webpack.config.JS中这样做

output: {
filename: '../PrefixDir/[name].[chunkhash].js',
...
},