Question

我在<projectRoot>/vue.config.js中使用的Webpack别名定义为：

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"
  },

我在网上找不到任何东西，而且我更像是后端开发而不是前端开发，所以我有点不了解。任何帮助表示赞赏！

谢谢

在Gitlab CI /管道中忽略VueJS Webpack别名

0 个答案: