vue-cli生成的vue3项目配置

我用的node版本 20.15.1，vue-cli版本 5.0.8

热更新

使用vue-cli生成了vue3项目之后，发现没有热更新。

此处需要补充一下热更新的配置
是给devServer设置hot为true

于是在项目配置文件 vue.config.js中去查看配置

发现使用vue-cli生成的配置文件，可真是精简啊🤣
由于网上找的配置，基本都是以下格式

module.exports = {.....}

而咱们的vue-cli生成的格式是使用defineConfig包裹的

module.exports = defineConfig({...})

这俩写法不一样，使用应该不一样？
为了解defineConfig的使用，咱们去源码里面找defineConfig的定义，发现巧了，它也有devServer

于是将vue.config.js文件配置为

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  devServer:{
    hot:true,
  }
})

重启项目，然后随便修改项目内的页面样式，发现热更新已经有了

补充

vue-cli官方文档里面有说到，defineConfig加与不加其实没差，加了的话会有更好的类型提示。

配置路径别名@

虽然vite可以通过下面的方式配置项目别名:

import { defineConfig } from 'vite'

const path = require('path')
export default defineConfig({
    resolve: {
        alias: {
            '@': path.resolve(__dirname, './src'),
        },
    },

})

但是咱们用vue-cli的配置文件不能这样写，会提示
ERROR Invalid options in vue.config.js: “resolve” is not allowed

只能用configureWebpack包一层，也就是下面的方式：

const { defineConfig } = require('@vue/cli-service')
const path = require("path");

module.exports = defineConfig({
  transpileDependencies: true,
  devServer:{
    hot:true,
  },
  configureWebpack:{
    resolve: {
      alias: {
        '@': path.resolve(__dirname,'./src'),
      }
    }
  }
})