vue3+vite 搭建项目及常见问题

创建项目

1、npm create vite@latest, 下一步，选vue, 下一步，选typescript 成功；
2、进入项目，npm install 手动安装vue和vite相关的依赖包；
3、npm run dev 运行项目

配置server

在vite.config.js中配置

import { defineConfig } from 'vite';
export default defineConfig({
	server: {
	    host: '0.0.0.0',
	    port: 3000, // 设置服务启动的端口号；如果端口已经被使用，Vite 会自动尝试下一个可用的端口
	    open: false, // 服务启动后自动打开浏览器
	    proxy: {
	      '/api': {
	        target: 'http://1.1.1.20:8899', // 真实接口服务地址
	        changeOrigin: true,
	        rewrite: path => path.replace(/^\/api/, ''), // 注意代理地址的重写
	      },
	   },
	},
});

配置预处理器

安装less 和 less-loader
cnpm i less less-loader -D
在vite.config.js中

import { defineConfig } from 'vite';
export default defineConfig({
	css: {
	    preprocessorOptions: {
		      less: {
		        javascriptEnabled: true,
		      },
	    },
	},
});

配置gzip 压缩

安装：cnpm i vite-plugin-compression -D
在vite.config.js中配置

import viteCompression from 'vite-plugin-compression';
export default defineConfig({
  plugins: [
    viteCompression({
      threshold: 10240, // 大于 10kb 的文件才会被压缩
      deleteOriginFile: false, // 是否删除源文件
    })
  ]
 });

配置resolve 别名

在vite.config.js中配置

import { defineConfig } from 'vite';
import { resolve } from 'path';
export default defineConfig({
	resolve: {
	   alias: {
	     '@': resolve(__dirname, 'src'),
	      '@components': resolve(__dirname, 'src/components'),
	      '@apis': resolve(__dirname, 'src/apis'),
	  },
   },
});

常见问题

1、dev run dev 运行项目时，报错：‘vite’ 不是内部或外部命令，也不是可运行的程序
或批处理文件；
原因：使用vite创建vue3.0项目的时候，vite不会自动安装相关的依赖，需要我们手动去安装，连node_modules文件夹都没有。vite不像 node 或 vue cli，会自动帮助我们执行 npm i (install) 命令去下载相关依赖，需要我们手动下载；
解决方法：npm install 安装所有的依赖包