vite是什么
vite
一词翻译成中文:快
,在尤大神介绍Vue3.0时提到了vite这个工具,其描述是这样的:针对Vue单页面组件的无打包开发服务器,可以在浏览器运行请求的vue文件。
它和我们使用的vue-cli的作用基本相同,相当于vue项目构建的升级产品。vite在开发的时候没有打包过程,ES模块源码直接传输给浏览器,浏览器使用自带的 <script module>
进行解析支持,通过 HTTP 请求进行每次 import,开发服务器拦截请求和对需要转换的代码进行转换。生产环境打包是通过rollup
完成的。
vite特性及优点
1.开发服务器不需要打包操作,轻快冷服务启动
2.瞬间热更新
3.真正的按需编译,不会刷新全部DOM
开始使用
yarn create vite-app vite-demo
cd vite-demo
yarn
yarn dev
目录结构
|-node_modules -- 项目依赖包的目录
|-public -- 项目公用文件
|--favicon.ico -- 网站地址栏前面的小图标
|-src -- 源文件目录,程序员主要工作的地方
|-assets -- 静态文件目录,图片图标,比如网站logo
|-components -- Vue3.x的自定义组件目录
|--App.vue -- 项目的根组件,单页应用都需要的
|--index.css -- 一般项目的通用CSS样式写在这里,main.js引入
|--main.js -- 项目入口文件,SPA单页应用都需要入口文件
|--.gitignore -- git的管理配置文件,设置那些目录或文件不管理
|-- index.html -- 项目的默认首页,Vue的组件需要挂载到这个文件上
|-- package-lock.json --项目包的锁定文件,用于防止包版本不一样导致的错误
|-- package.json -- 项目配置文件,包管理、项目名称、版本和命令
支持TS、SCSS、JSX
ts
<script lang="ts">
// ...
</script>
scss
cd $repo
yarn add -D sass
修改相关代码
<style lang="scss">
// ...
</style>
jsx
在src下新建App.jsx
function App() {
return (<h1>页面仔小杨</h1>)
}
export default App;
修改main.js
// import App from './App.vue'
import App from './App.jsx'
vite.config.js配置
const path = require('path')
module.exports = {
/**
* 在生产中服务时的基本公共路径。
* @default '/'
*/
base: '/',
/**
* 与“根”相关的目录,构建输出将放在其中。如果目录存在,它将在构建之前被删除。
* @default 'dist'
*/
outDir: 'dist',
port: 3000,
// 是否自动在浏览器打开
open: true,
// 是否开启 https
https: false,
// 服务端渲染
ssr: false,
// 引入第三方的配置
optimizeDeps: {
include: ["moment", "echarts", "axios", "mockjs"]
},
alias: {
// 键必须以斜线开始和结束
'/@/': path.resolve(__dirname, './src')
// '/@components/': path.resolve(__dirname, './src/components')
},
proxy: {
// 如果是 /itxing 打头,则访问地址如下
'/itxing': 'http://192.168.1.95:8081',
// 如果是 /api 打头,则访问地址如下
'/api': {
target: 'http://192.168.1.99:8080/',
changeOrigin: true,
rewrite: path => path.replace(/^\/api/, '')
}
}
}
注意一下别名配置, 不可配置成
alias: {
'@': './src'
}
否则代码中使用@会报错,尤大神表示这是一个Bug,不过他已经提出了解决方案
使用别名时要使用/@/