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，不过他已经提出了解决方案

使用别名时要使用/@/

关注公众号： 页面仔小杨 【实战干货、原创分享】