使用vite搭建vue项目

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

搭建第一个Vite项目:

Node.js需要>12.0.0

npm init @vitejs/app

安装完成之后可以指定项目名称:
image
选择初始化模板:
使用vite搭建vue项目_第1张图片
选择完成之后:

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
      }
})

你可能感兴趣的