今日九月二十五，星期四。宜嫁娶订盟，忌斋醮安门。

一、解决npm下载慢或者下载不了的问题

// 设置淘宝镜像的地址
npm config set registry http://registry.npm.taobao.org
// 查看当前的下载地址
npm config get registry

二、Vite跨域配置

在Vite官网有这样一段配置可以设置跨域的地址

export default defineConfig({
  server: {
    proxy: {
      // 字符串简写写法
      '/foo': 'http://localhost:4567',
      // 选项写法
      '/api': {
        target: 'http://jsonplaceholder.typicode.com',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, '')
      },
      ...
    }
  }
})

Vite官网解决方案链接：https://cn.vitejs.dev/config/server-options.html#server-proxy

三、Vite打包只有runtime模式

在开发阶段Vite的打包速度远大于Webpack，这是因为Webpack先打包再启动开发服务器。而Vite直接启动开发服务器，然后按需编译依赖文件。

new Vue({
    el: '#app',
    router,
    components: { App },
    template: '<App/>'
})

需要修改为

new Vue({
    el: '#app',
    router,
    components: { App },
    render: (h) => h(App)
})

四、使用require()动态导入图片报错和解决方法

这是因为Vite使用Typescript开发，但是Typescript不支持require，最后会出require is not defined这样的错误。

return require("../../assets/img/user.png");

需要修改为

return new URL("../../assets/img/user.png", import.meta.url);

Vite官网解决方案链接：https://cn.vitejs.dev/guide/assets.html

五、加载JSON文件，解析JSON失败

出现failed to parse json这样问题的时候，是因为JSON文件需要完整的原数据格式，不需要类似的注释、export、包装等。

module.exports = [
  {
    "hello":"world"
  }
]

需要修改为

[
  {
    "hello":"world"
  }
]