Vue.js 在“npm生成”的输出中为源路径添加前缀`

Vue.js 在“npm生成”的输出中为源路径添加前缀`,vue.js,npm,npm-scripts,Vue.js,Npm,Npm Scripts,我使用vue cli创建了一个小型vue应用程序。我使用npm-run-build生成UI的生产版本,最终得到一堆CSS、js和一个包含所有这些js和CSS文件的HTML页面文件。但是,为了应用程序的目的,HTML需要移动到另一个目录,中间件可以在那里访问它。这就是为什么js和CSS文件的URL需要加前缀,以指向新的目录。是否可以在js和CSS文件的输出HTML文件中创建前缀 以下是包.json的内容: { "name": "investmentapp"

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

以下是
包.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 service

中。您可以通过添加一个“copy”脚本来复制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',
  ...
},

很好,我可以在
copy
脚本中使用python代码。我不确定是否在
vue cli服务
的保护下使用了webpack,但我可以检查配置文件。否则,我可能会把它和我自己的网页包结合起来。