首页专栏 vue.js 文章详情

使用vite搭建vue项目

望记发布于今天 06:36

去年就知道尤大开发了一个新的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
      }
})

前端框架 vue.js vite

阅读 33 更新于今天 06:42

赞收藏

本作品系原创，采用《署名-非商业性使用-禁止演绎 4.0 国际》许可协议

望记

0 声望

0 粉丝

关注作者

0 条评论

得票时间

提交评论

望记