image
vite是什么
153
vite一词翻译成中文：快，在尤大神介绍Vue3.0时提到了vite这个工具，其描述是这样的：针对Vue单页面组件的无打包开发服务器，可以在浏览器运行请求的vue文件。
它和我们使用的vue-cli的作用基本相同，相当于vue项目构建的升级产品。vite在开发的时候没有打包过程，ES模块源码直接传输给浏览器，浏览器使用自带的 <script module> 进行解析支持，通过 HTTP 请求进行每次 import，开发服务器拦截请求和对需要转换的代码进行转换。生产环境打包是通过rollup完成的。
155
157
vite特性及优点
1.开发服务器不需要打包操作，轻快冷服务启动
2.瞬间热更新
3.真正的按需编译，不会刷新全部DOM
开始使用
yarn create vite-app vite-demo
cd vite-demo
yarn
yarn dev
156
目录结构
|-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'
159
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，不过他已经提出了解决方案
160
使用别名时要使用/@/
