vite的基本配置

前面我们体验了vue3.0一些新的api,那就赶快把架子速度搭起来把.当然右大大新的东西 ‘ vite’也要配起来.
vite一出表示再也回不去 webpack 了, 还引来了 webpack 核心开发人员肖恩的搞笑回复如下:

图1

那就让我们一起来看一下 vite 到底有啥魅力把.
那么什么是vite????又有什么特点呢???
Vite 是一个由原生 ESM 驱动的 Web 开发构建工具,在开发环境下基于浏览器原生 ESimports 开发，在生产环境下基于 Rollup 打包。

它主要具有以下特点：

      1.快速的冷启动

      2.即时的模块热更新

      3.真正的按需编译

好了,直接创一个demo看看把

$ npm init vite-app <project-name>

$cd<project-name>

$ npm install

$ npm run dev

这里把目录贴出来看看有啥区别
├── index.html

├── package.json

├── public

│  └── favicon.ico

└── src

    ├── App.vue

    ├── assets

    │  └── logo.png

    ├── components

    │  └── HelloWorld.vue

    ├── index.css

    └── main.js

打开main.js和入口

图2

从上面图可以看出好像多了<script type="module" src="/src/main.js"></script>script module 是 ES 模块在浏览器端的实现，目前主流的浏览器都已经支持,其最大的特点是在浏览器端使用 export、import 的方式导入和导出模块，在 script 标签里设置 type="module"。浏览器会识别添加 type="module"的 <script> 元素，浏览器会把这段内联 script 或者外链 script 认为是 ECMAScript 模块，浏览器将对其内部的 import 引用发起 http 请求获取模块内容。

vite的简单配置如下:

import { resolve } from 'path';

function pathResolve(dir) {

  return resolve(__dirname, '.', dir);

}

module.exports = {

  /**

  * 在生产环境的基本公共路径。

  * @default '/'

  */

  //base: '',

  /**

  * 构建输出目录。如果目录存在，它将在构建之前被删除。

  * @default 'dist'

  */

  // outDir: 'dist,

  // 端口号

  // port: 3000,

  // 是否自动在浏览器打开

  // open: true,

  // 是否开启 https

  // https: false,

  // 服务端渲染

  // ssr: false,

  // 引入第三方的配置

  /* optimizeDeps: {

    include: ['moment', 'axios'],

  }, */

  // 目录别名

  alias: {

    '/@/': pathResolve('src'),

  },

  // 打包后静态资源 js/css/image 存放目录，@default '_assets'

  assetsDir: '',

  // 代理

  /* proxy: {

        '/api': {

          target: 'http://www.baidu.com',

          changeOrigin: true,

          rewrite: path => path.replace(/^\/api/, '')

        }

    } */

};