create-vue初试，问题小结

create-vue初试，问题小结

create-vue，一个基于vite的全新的vue脚手架工具，始于2021年10月7日，还很嫩，传说未来会替掉Vue-CLI。

看文档，用法很简单，就一句命令

1
npm init vue@next

但真正用起来，就有几个小问题要注意了。

1、npm版本问题

命令运行后，选好配置，运行npm install，会发现一堆 npm WARN 信息，其中

1
npm WARN notsup Unsupported engine for vscode-json-languageservice@4.1.8: wanted: {"npm":">=7.0.0"} (current: {"node":"14.0.0","npm":"6.14.4"})

有些库要求"npm":">=7.0.0"，虽然create-vue的package.json里面，建议的node版本是

1
2
3
"engines": {
    "node": "^12.13.0 || ^14.0.0 || >= 16.0.0"
}

但是，还是切换成16.0.0的版本比较好。

我用的是nvm，执行如下命令

没安装的先安装

1
nvm install v16.0.0
1
nvm use v16.0.0
1
Now using node v16.0.0 (npm v7.10.0)

这样npm install的时候就不会有警告信息了。

2、别名报错问题

运行npm run dev，报错（截一段，太多了）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
> node_modules/vite/dist/node/chunks/dep-be032392.js:42584:38: error: [plugin: vite:dep-scan] ENOENT: no such file or directory, open '/Users/liyoro/Documents/web%E5%89%8D%E7%AB%AF%E5%AD%A6%E4%B9%A0/vue3-project/src/components/HelloWorld.vue'
    42584 │                 let raw = fs__default.readFileSync(path, 'utf-8');
          ╵                                       ^
    at Object.openSync (node:fs:506:3)
    at Object.readFileSync (node:fs:402:35)
    at /Users/liyoro/Documents/vue3-project/node_modules/vite/dist/node/chunks/dep-be032392.js:42584:39
    at callback (/Users/liyoro/Documents/vue3-project/node_modules/esbuild/lib/main.js:889:34)
    at handleRequest (/Users/liyoro/Documents/vue3-project/node_modules/esbuild/lib/main.js:672:36)
    at handleIncomingPacket (/Users/liyoro/Documents/vue3-project/node_modules/esbuild/lib/main.js:719:7)
    at Socket.readFromStdout (/Users/liyoro/Documents/vue3-project/node_modules/esbuild/lib/main.js:596:7)
    at Socket.emit (node:events:365:28)
    at addChunk (node:internal/streams/readable:314:12)
    at readableAddChunk (node:internal/streams/readable:289:9)

   node_modules/vite/dist/node/chunks/dep-be032392.js:42583:18: note: This error came from the "onLoad" callback registered here
    42583 │             build.onLoad({ filter: htmlTypesRE, namespace: 'html'...
          ╵                   ~~~~~~
    at setup (/Users/liyoro/Documents/vue3-project/node_modules/vite/dist/node/chunks/dep-be032392.js:42583:19)
    at handlePlugins (/Users/liyoro/Documents/vue3-project/node_modules/esbuild/lib/main.js:756:23)
    at Object.buildOrServe (/Users/liyoro/Documents/vue3-project/node_modules/esbuild/lib/main.js:1044:7)
    at /Users/liyoro/Documents/vue3-project/node_modules/esbuild/lib/main.js:1895:17
    at new Promise (<anonymous>)
    at Object.build (/Users/liyoro/Documents/vue3-project/node_modules/esbuild/lib/main.js:1894:14)
    at Object.build (/Users/liyoro/Documents/vue3-project/node_modules/esbuild/lib/main.js:1749:51)
    at /Users/liyoro/Documents/vue3-project/node_modules/vite/dist/node/chunks/dep-be032392.js:42506:54
    at Array.map (<anonymous>)

   html:/Users/liyoro/Documents/vue3-project/src/App.vue:5:7: note: The plugin "vite:dep-scan" was triggered by this import
        5 │ import '@/components/HelloWorld.vue'

看着就是一组件路径错误的问题，搜了下，还有人遇到图片路径错误的问题的。这时候要看看项目的别名配置。

create-vue初始化好的默认项目里面，vite.config.ts文件，默认配置如下

1
2
3
4
5
6
7
8
export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@/': new URL('./src/', import.meta.url).pathname
    }
  }
})

修改下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
const path = require('path')

function _resolve(dir: string) {
  return path.resolve(__dirname, dir);
}

export default defineConfig({
  resolve: {
    alias: {
      '@': _resolve('src'),
      '@assets': _resolve('src/assets'),
      '@comps': _resolve('src/components'),
      '@utils': _resolve('src/utils'),
      '@router': _resolve('src/router'),
      '@store': _resolve('src/store'),
    }
  },
  plugins: [vue()]
})

运行npm run dev，成功。

总结

create-vue感觉还不是太完善，但是建项目确实快，看以后的迭代吧。