使用vite搭建vue项目

望记 2021-02-23 14:39:08
项目 vue 使用 搭建 vite


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

搭建第一个Vite项目:

Node.js需要>12.0.0

npm init @vitejs/app

安装完成之后可以指定项目名称:
image
选择初始化模板:
image
选择完成之后:

cd vite-project
npm install
npm run dev

第一个Vite+Vue3.0项目就搭建好了!Vite默认应用模板为3.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
}
})
版权声明
本文为[望记]所创,转载请带上原文链接,感谢
https://segmentfault.com/a/1190000039261260

  1. 对前端异常window error捕获的全面总结
  2. A comprehensive summary of front end exception window error capture
  3. 成功解决Problem while trying to mount target]\“. HTTP response code is 400
  4. Problem while trying to mount target] \ ". HTTP response code is 400
  5. 放弃okhttp、httpClient,选择了这个牛逼的神仙工具!贼爽
  6. 前端面试每日 3+1 —— 第679天
  7. How to add elements at the beginning of an array in JS?
  8. Give up okhttp and httpclient and choose this awesome immortal tool! Thief Shuang
  9. Front end interview daily 3 + 1 - day 679
  10. 【2021 第一期】日常开发 26 个常见的 JavaScript 代码优化方案
  11. Daily development of 26 common JavaScript code optimization schemes
  12. 前端的字符串时间如何自动转换为后端Java的Date属性,介绍springMVC中如何解决时间转换问题
  13. How to automatically convert the front-end string time to the back-end Java date attribute, and how to solve the time conversion problem in spring MVC are introduced
  14. 前端面试常考题:JS垃圾回收机制
  15. ReactDOM.render串联渲染链路(一)
  16. 更简洁、更快速!腾讯云 Serverless 云函数创建流程再次升级!
  17. 粗涉Webpack
  18. Frequently asked questions in front end interview: JS garbage collection mechanism
  19. ReactDOM.render Serial rendering link (1)
  20. More concise and faster! Tencent cloud serverless cloud function creation process upgrade again!
  21. 更简洁、更快速!腾讯云 Serverless 云函数创建流程再次升级!
  22. About webpack
  23. More concise and faster! Tencent cloud serverless cloud function creation process upgrade again!
  24. 详解vue静态资源打包中的坑与解决方案
  25. 一篇搞懂TCP、HTTP、Socket、Socket连接池
  26. 字节跳动2021前端技术岗发布+最新内部面试题
  27. Detailed explanation of Vue static resource packaging and Solutions
  28. Understanding TCP, HTTP, socket, socket connection pool
  29. 2008-2021 front end technical post release + latest internal interview questions
  30. 4. Vue基本指令
  31. 4. Vue basic instruction
  32. Java 发起 http 请求
  33. Java initiates HTTP request
  34. 网站由http升级为https图文教程
  35. Upgrade the website from HTTP to HTTPS
  36. 更简洁、更快速!腾讯云 Serverless 云函数创建流程再次升级!
  37. More concise and faster! Tencent cloud serverless cloud function creation process upgrade again!
  38. 混合开发入门 Vue结合Android/iOS开发仿京东项目App
  39. Hybrid development entry Vue combined with Android / IOS to develop app imitating Jingdong project
  40. 无缝对接 Tableau,这家月活跃用户 5000+ 的大型银行如何实现自助式分析?
  41. Are airpods still the strongest? Horizontal evaluation of 4 true wireless headphones
  42. Seamless connection with tableau, how can this large bank with 5000 + active users realize self-service analysis?
  43. react-native版文字跑马灯
  44. React native text running lantern
  45. Java、JavaScript、C、C++、PHP、Python都是用来开发什么?
  46. What are Java, JavaScript, C, C + +, PHP and python used to develop?
  47. this.byId(SupplierForm).bindElement in SAP UI5
  48. SAP UI5 JavaScript文件的lazy load - 懒加载
  49. this.byId (SupplierForm).bindElement in SAP UI5
  50. Lazy load lazy load of SAP ui5 JavaScript files
  51. "Gnome 3" - interface elements, desktop components, part names (learning notes) @ 20210223
  52. How to connect the ground gas to the micro front end?
  53. How to transform single / micro service application into serverless application
  54. 在 2021 年你需要掌握的 7 种关于 JavaScript 的数组方法
  55. Seven array methods for JavaScript you need to master in 2021
  56. 在 2021 年你需要掌握的 7 种关于 JavaScript 的数组方法
  57. Seven array methods for JavaScript you need to master in 2021
  58. 在 2021 年你需要掌握的 7 种关于 JavaScript 的数组方法
  59. Seven array methods for JavaScript you need to master in 2021
  60. RxHttp - 轻量级、可扩展、易使用、完美兼容MVVM、MVC架构的网络封装类库