首页 > 解决方案 > Gitlab CI / Pipelines 中忽略了 VueJS Webpack 别名

问题描述

我在<projectRoot>/vue.config.js定义为:

module.exports = {  
  publicPath: process.env.NODE_ENV === 'production'
    ? '/app/'
    : '/',
  configureWebpack: {
    resolve: {
      alias: {
        '@': 'C:\\Path\\To\\Project\\src'
      }
    }
  }
}

这完美地允许我使用以下语法从其他组件导入 VueJS 组件:

<script>
import CheckboxInput from '@/components/inputs/CheckboxInput.vue'

...
</script>

但是,在我的 gitlab 管道中,我在阶段build:exec步骤中收到以下错误build

$ yarn run build
yarn run v1.22.5
$ vue-cli-service build
-  Building for production...
 ERROR  Failed to compile with 2 errors14:39:07
These dependencies were not found:
* @/components/collections/statistics/EmailStatisticsCollection.vue in ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/views/Dashboard.vue?vue&type=script&lang=js&
* @/components/collections/statistics/PrintStatisticsCollection.vue in ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/views/Dashboard.vue?vue&type=script&lang=js&
To install them, you can run: npm install --save @/components/collections/statistics/EmailStatisticsCollection.vue @/components/collections/statistics/PrintStatisticsCollection.vue
 ERROR  Build failed with errors.
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
ERROR: Job failed: exit status 1

gitlab-ci.yml的定义为:

stages:
  - setup
  - build
  - test

variables:
  GIT_CLONE_PATH: $CI_BUILDS_DIR\<..>\client
  PIPELINE_UTILS_PATH: $CI_BUILDS_DIR\PipelineUtils

cache:
  paths:
    - node_modules/
    - .env.local

before_script:
  - Copy-Item $PIPELINE_UTILS_PATH\client.env $GIT_CLONE_PATH\.env.local

setup:install:
  tags:
    - vuejs
  stage: setup
  script:
    - yarn install
    
build:lint:
  tags:
    - vuejs
  stage: build
  needs: ["setup:install"]
  script:
    - yarn run lint

build:exec:
  tags:
    - vuejs
  stage: build
  needs: ["setup:install"]
  script:
    - yarn run build
  artifacts:
    paths:
      - dist

test:unit:
  tags:
    - vuejs
  stage: test
  needs: ["build:exec"]
  script:
    - yarn run test:unit

脚本在 package.json 中定义以使用 vue-cli-service:

  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "test:unit": "vue-cli-service test:unit",
    "lint": "vue-cli-service lint"
  },

我在网上找不到任何东西,而且我更像是一个后端开发人员而不是前端,所以我有点超出我的深度。任何帮助表示赞赏!

谢谢

标签: vue.jswebpackcontinuous-integrationgitlab

解决方案


推荐阅读