[vuejs/vue-cli]使用preset在本地调试创建项目,generator.js不起作用

2024-01-29 883 views
5
Version

3.0.0

Node and OS info

node 8.11.1 / yarn 1.9.2 / mac 10.13.5

Steps to reproduce

1.根据文档要求,在preset.json同级目录创建Prompts.js 和generator.js 2.使用命令 vue create --preset ./my-preset xxxxx

What is expected?

prompts.js 内容如下: module.exports = [ { name: "wechartEnv", type: "confirm", message: xxxx }, { name: "needLinkme", type: "confirm", message: xxxxx } ];

What is actually happening?

并未出现任何选项,generator.js无设置无效果

回答

9

preset.json配置的选项是有效的,但是generator.js和prompts.js无效 目录结构如下:

.
├── generator.js
├── preset.json
└── prompts.js

prompts.js 内容如下

module.exports = [
  {
    name: "wechartEnv",
    type: "confirm",
    message: `是否需要在微信环境中进行使用`
  },
  {
    name: "needLinkme",
    type: "confirm",
    message: `是否需要使用深度链接功能`
  }
];
2

无法复现……能否提供下另外两个文件的内容?

4

preset.json

{
  "useConfigFiles": true,
  "cssPreprocessor": "sass",
  "plugins": {
    "@vue/cli-plugin-babel": {},
    "@vue/cli-plugin-eslint": {
      "config": "standard",
      "lintOn": ["save", "commit"]
    }
  },
  "configs": {
    "vue": {
      "productionSourceMap": false
    },
    "postcss": {
      "plugins": {
        "postcss-pxtorem":{
          "rootValue": 75,
          "unitPrecision": 5,
          "propList": ["*"],
          "selectorBlackList": ["ignore"],
          "replace": true,
          "mediaQuery": false,
          "minPixelValue": 0
        }
      }
    },
    "eslintConfig": {
      "globals": {
        "WebViewJavascriptBridge": true,
        "wx": true,
        "_czc": true
      },
      "rules": {
        "generator-star-spacing": "off",
        "no-mixed-spaces-and-tabs": "off",
        "no-tabs": "off"
      }
    },
    "babelConfig": {
      "plugins": [
        "lodash",
        ["import", {
          "libraryName": "vant",
          "libraryDirectory": "es",
          "style": true
        }]
      ]
    }
  }
}

generator.js

module.exports = (api, options, rootOptions) => {
  if (options.wechartEnv) {
    console.log('需要在微信环境中进行使用')
  }
  if (options.needLinkme) {
    console.log('需要使用深度链接功能')
  }
  // 插件通用配置项
  api.extendPackage({
    dependencies: {
      axios: '^0.18.0',
      vant: '^1.1.15',
      'vue-router': '^3.0.1',
      vuex: '^3.0.1'
    },
    devDependencies: {
      "babel-plugin-lodash": "^3.3.4",
      "lodash": "^4.17.10",
      "lodash-webpack-plugin": "^0.11.5",
      "postcss-aspect-ratio-mini": "^0.0.2",
      "postcss-bem": "^0.4.1",
      "postcss-import": "^12.0.0",
      "postcss-pxtorem": "^4.0.1",
      "postcss-url": "^8.0.0"
    }
  })
  api.render('./template')
}
7

确定你用的是正式的 3.0.0 版本。

8

@sodatea @yyx990803 3.0版本仅支持在同级目录下的generator.js,并不支持使用在generator文件夹下的文件进行创建

.
├── generator
│   ├── index.js
│   ├── template
│   │   ├── public
│   │   │   └── index.html
│   │   └── src
│   │       ├── App.vue
├── preset.json
└── prompts.js

这样的写法是读取不到的,插件的写法是可以支持这样的写法的,是否可以支持呢

6

……这跟你昨天提供的目录结构不一样啊 这个应该要支持的,我等下提交个 PR

4

@sodatea 因为在本地测试时,运行的是rc版本,当时没有注意切换node环境导致没有效果,sorry.