Azure 部署时未找到 Vue CSS 依赖项错误

Question

我有一个主要根据本教程创建的 vue 应用程序，但没有 CRUD 功能：https://developer.okta.com/blog/2020/05/15/vue-login。

它是使用 Vue cli 4.3.1 使用 vue create 创建的。

它与 npm run serve 一起运行良好，并且在本地构建时构建没有错误。

我现在正在尝试通过 azure 管道部署到 azure web 应用程序。我正在使用的 yaml 如下。 yaml 启动良好并通过 npm 安装。当它到达 devBuild (vue-cli-service lint & vue-cli-service build --mode dev) 时，部署失败，说它找不到两个依赖项，这似乎是 Welcome 和 home 组件的 CSS 文件.同一目录中具有 CSS 文件的同一目录中的其他组件没有任何问题。我尝试在顶部执行“require (”./home.css")，并尝试在 require 或 style 标记方法中使用替代路径引用，例如：

<style scoped>
     @import "./home.css";
</style>
<style scoped>
     @import "@/home.css";
</style>
<style scoped>
     @import "home.css";
</style>

这些似乎都没有什么不同。我不明白为什么这 2 个 CSS 文件会造成问题，而它们是唯一造成问题的文件。

---

部署错误：

These dependencies were not found:

* -!../../node_modules/@vue/cli-service/node_modules/css-loader/dist/cjs.js??ref--6-oneOf-1-1!../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../node_modules/postcss-loader/src/index.js??ref--6-oneOf-1-2!./home.css in ./node_modules/@vue/cli-service/node_modules/css-loader/dist/cjs.js??ref--6-oneOf-1-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??ref--6-oneOf-1-2!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/Home.vue?vue&type=style&index=0&id=8dc7cce2&scoped=true&lang=css&

* -!../../node_modules/@vue/cli-service/node_modules/css-loader/dist/cjs.js??ref--6-oneOf-1-1!../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../node_modules/postcss-loader/src/index.js??ref--6-oneOf-1-2!./welcome.css in ./node_modules/@vue/cli-service/node_modules/css-loader/dist/cjs.js??ref--6-oneOf-1-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??ref--6-oneOf-1-2!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/Welcome.vue?vue&type=style&index=0&id=d4b7673c&scoped=true&lang=css&

---

用于管道的yaml：

# Node.js with Vue
# Build a Node.js project that uses Vue.
# Add steps that analyze code, save build artifacts, deploy, and more:
# https://docs.microsoft.com/azure/devops/pipelines/languages/javascript

trigger:
- main

pool:
  vmImage: 'ubuntu-latest'

steps:
- task: NodeTool@0
  inputs:
    versionSpec: '13.7'
  displayName: 'Install Node.js'

- script: |
    npm install
  displayName: 'npm install'

- script: |
    npm run devBuild
  displayName: 'npm dev build'
  
  ## Copy the client to the staging directory
- task: CopyFiles@2
  inputs:
    SourceFolder: '$(System.DefaultWorkingDirectory)'
    Contents: '**'
    TargetFolder: '$(Build.ArtifactStagingDirectory)'
    cleanTargetFolder: true

- task: AzureRmWebAppDeployment@4
  inputs:
    ConnectionType: 'AzureRM'
    azureSubscription: 'my-serviceconnection'
    appType: 'webApp'
    WebAppName: 'my-test'
    packageForLinux: '$(Build.ArtifactStagingDirectory)'
    AppSettings: '-SCM_DO_BUILD_DURING_DEPLOYMENT true -WEBSITE_RUN_FROM_PACKAGE 1'
    RemoveAdditionalFilesFlag: true

---

package.json 文件

{
    "name": "my.site",
    "version": "0.1.0",
    "private": true,
    "scripts": {
        "serve": "vue-cli-service serve",
        "build": "vue-cli-service build",
        "devBuild": "vue-cli-service lint & vue-cli-service build --mode dev",
        "lint": "vue-cli-service lint"
    },
    "dependencies": {
        "@okta/okta-vue": "^2.0.0",
        "bootstrap": "^4.5.3",
        "bootstrap-vue": "^2.21.2",
        "core-js": "^3.6.5",
        "css-loader": "^3.6.0",
        "eslint": "^7.18.0",
        "jquery": "^3.5.1",
        "vue": "^2.6.11",
        "vue-router": "^3.1.6"
    },
    "devDependencies": {
        "@vue/cli-plugin-babel": "~4.5.0",
        "@vue/cli-plugin-eslint": "~4.5.0",
        "@vue/cli-service": "~4.5.0",
        "babel-eslint": "^10.1.0",
        "eslint": "^7.18.0",
        "eslint-plugin-vue": "^6.2.2",
        "vue-template-compiler": "^2.6.11"
    },
    "eslintConfig": {
        "root": true,
        "env": {
            "node": true,
            "browser": true,
            "es6": true
        },
        "extends": [
            "plugin:vue/essential",
            "eslint:recommended"
        ],
        "parserOptions": {
            "ecmaVersion": 9,
            "sourceType": "module",
            "ecmaFeatures": {
                "jsx": true,
                "modules": true
            }
        },
        "rules": {
          "keyword-spacing": 2
        }
    },
    "browserslist": [
        "> 1%",
        "last 2 versions",
        "not dead"
    ]
}

Answer 1

我们应该通过 cmd npm run build 而不是 npm run devBuild 运行 vue.js 项目，我们可以参考这个 blog 来使用 Azure DevOps 管道为静态 Vue.js 应用程序构建 CI/CD。

结果：