使用vite搭建vue项目

去年就知道尤大开发了一个新的web开发构建工具Vite，前几天Vite2.0正式发布啦！是时候学习起来了！

搭建第一个Vite项目:

Node.js需要>12.0.0

npm init @vitejs/app

安装完成之后可以指定项目名称：

选择初始化模板：

选择完成之后：

cd vite-project
npm install
npm run dev

第一个Vite+Vue3.0项目就搭建好了！Vite默认应用模板为Vue3.x，如果项目启动时，在浏览器F12时看不到Vue选项，Vue.js not detected，需要更新一下devtools，更新地址

快速构建方法：

# npm 6.x
npm init @vitejs/app my-project --template vue

# npm 7+ 需要额外的双横线：
npm init @vitejs/app my-project -- --template vue

打包：

npm run build

打包之后打开项目空白，需要配置vite.config.js中的base基础路径为'./'

环境变量：

Vite在一个特殊的import.meta.env对象上暴露环境变量

• import.meta.env.MODE: String 应用运行的环境模式
• import.meta.env.BASE_URL: String 应用正在被部署在的base URL，由base配置项决定
• import.meta.env.PROD: Boolean 应用是否运行在生产环境
• import.meta.env.DEV: Boolean 应用是否运行在开发环境

.env文件

.env #所有情况下都会加载
.env.local #所有情况下都会加载，但会被git忽略（需要在.gitignore中加上.local）
.env.[mode] #只在指定模式下加载
.env.[mode].local #只在指定模式下加载，会被git忽略

vite.config.js常用配置

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
	// 要用到的插件数组
  	plugins: [vue()],
  	// 开发或生产环境服务的公共基础路径,可以是/foo/、https://foo.com/、空字符串或./(用于开发环境) 几种类型，这个选项也可以通过命令行参数指定（例：vite build --base=/my/public/path/）
  	base: './',
  	// 静态资源服务的文件夹, 默认"public"
  	publicDir: 'public',
  	css: {
  		postcss: {
  			plugins: [
  				require('autoprefixer')
  			]
  		}
  	},
  	server: {
  		// 服务器主机名，如果允许外部访问，可设置为"0.0.0.0"
  		host: '0.0.0.0',
  		// 服务器端口号
  		port: 3000,
  		// boolean | string 启动项目时自动在浏览器打开应用程序；如果为string，比如"/index.html"，会打开http://localhost:3000/index.html
  		open: false,
  		// 自定义代理规则
  		proxy: {
  			'/api': {
  				target: 'http://jsonplaceholder.typicode.com',
  				changeOrigin: true,
  				rewrite: (path) => path.replace(/^\/api/, '')
  			}
  		}
  	},
  	build: {
  		// 指定输出路径，默认'dist'
  		outDir: 'dist',
  		// 指定生成静态资源的存放路径(相对于build.outDir)
  		assetsDir: 'assets',
  		// 小于此阈值的导入或引用资源将内联为base64编码，设置为0可禁用此项。默认4096（4kb）
  		assetsInlineLimit: '4096',
  		// 启用/禁用CSS代码拆分，如果禁用，整个项目的所有CSS将被提取到一个CSS文件中,默认true
  		cssCodeSplit: true,
  		// 构建后是否生成source map文件，默认false
  		sourcemap: false,
  		// 为true时，会生成manifest.json文件，用于后端集成
  		manifest: false
  	}
})