GitLab

背景

服务器编译报错，报错信息如下

[1m[33mWARNING in ./src/views/dash/pages/index/my-dashboard/business/urged-data/index.vue?vue&type=template&id=52f77b82&scoped=true& (./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/vue-loader/lib??vue-loader-options!./src/views/dash/pages/index/my-dashboard/business/urged-data/index.vue?vue&type=template&id=52f77b82&scoped=true&)
Module Warning (from ./node_modules/vue-loader/lib/loaders/templateLoader.js):
(Emitted value instead of an instance of Error) The `prettify` option is on, but the dependency `prettier` is not found.
Please either turn off `prettify` or manually install `prettier`.
 @ ./src/views/dash/pages/index/my-dashboard/business/urged-data/index.vue?vue&type=template&id=52f77b82&scoped=true& 1:0-251 1:0-251
 @ ./src/views/dash/pages/index/my-dashboard/business/urged-data/index.vue
 @ ./node_modules/babel-loader/lib?cacheDirectory!./node_modules/vue-loader/lib??vue-loader-options!./src/views/dash/pages/index/my-dashboard/business/index.vue?vue&type=script&lang=js&
 @ ./src/views/dash/pages/index/my-dashboard/business/index.vue?vue&type=script&lang=js&
 @ ./src/views/dash/pages/index/my-dashboard/business/index.vue
 @ ./node_modules/babel-loader/lib?cacheDirectory!./node_modules/vue-loader/lib??vue-loader-options!./src/views/dash/pages/index/my-dashboard/index.vue?vue&type=script&lang=js&
 @ ./src/views/dash/pages/index/my-dashboard/index.vue?vue&type=script&lang=js&
 @ ./src/views/dash/pages/index/my-dashboard/index.vue
 @ ./node_modules/babel-loader/lib?cacheDirectory!./node_modules/vue-loader/lib??vue-loader-options!./src/views/dash/pages/index/entry.vue?vue&type=script&lang=js&
 @ ./src/views/dash/pages/index/entry.vue?vue&type=script&lang=js&
 @ ./src/views/dash/pages/index/entry.vue
 @ ./src/router/modules/index.js
 @ ./src/router/index.js
 @ ./src/main.js[39m[22m

其中关键信息

Module Warning (from ./node_modules/vue-loader/lib/loaders/templateLoader.js):
(Emitted value instead of an instance of Error) The `prettify` option is on, but the dependency `prettier` is not found.
Please either turn off `prettify` or manually install `prettier`.

关键词

• vue-loader
• prettify
• Please either turn off prettify or manually install prettier.

从 node_modules 中可以找到这句话 node_modules/@vue/component-compiler-utils/lib/compileTemplate.js

解决方案

方法一：（但并不能解决根本原因）

安装 prettier

npm i -D prettier

方法二：

继续追溯问题，node_modules/@vue/component-compiler-utils/lib/compileTemplate.js 中的逻辑是

• 非生产环境
• 配置中 prettify === true
• require('prettier') 报错，即 获取不到 prettier 依赖

// 文件内找到这句话 isProduction = process.env.NODE_ENV === 'production'

// ...

if (!isProduction) {
  // mark with stripped (this enables Vue to use correct runtime proxy
  // detection)
  code += `render._withStripped = true`;
  if (prettify) {
      try {
          code = require('prettier').format(code, {
              semi: false,
              parser: 'babel'
          });
      }
      catch (e) {
          if (e.code === 'MODULE_NOT_FOUND') {
              tips.push('The `prettify` option is on, but the dependency `prettier` is not found.\n' +
                  'Please either turn off `prettify` or manually install `prettier`.');
          }
          tips.push(`Failed to prettify component ${options.filename} template source after compilation.`);
      }
  }
}

但我们编译的环境是集成、测试环境，其实也是 非开发环境，为什么会报这个错？

打印 process.env.NODE_ENV，发现是 integration，为什么不是 production？

继续追溯，项目内的配置文件进行了赋值 build/integration.js

process.env.NODE_ENV = 'integration'

这里的本意是区分是哪个环境进行了编译，但其实没有必要，所以这里需要改为

process.env.NODE_ENV = 'production' // 指定编译环境为 development/production（依赖包内只判断这两个值）

总结

其实是一个历史的 webpack 配置问题，但为什么到现在才触发还不得而知。