前面我們體驗了vue3.0一些新的api,那就趕快把架子速度搭起來把.當然右大大新的東西 ‘ vite’也要配起來.
vite一出表示再也回不去?webpack?了, 還引來了?webpack?核心開發(fā)人員肖恩的搞笑回復如下:
那就讓我們一起來看一下?vite?到底有啥魅力把.
那么什么是vite????又有什么特點呢???
Vite 是一個由原生 ESM 驅(qū)動的 Web 開發(fā)構(gòu)建工具,在開發(fā)環(huán)境下基于瀏覽器原生 ESimports 開發(fā)，在生產(chǎn)環(huán)境下基于 Rollup 打包乌助。
它主要具有以下特點：
? ? ? 1.快速的冷啟動
? ? ? 2.即時的模塊熱更新
? ? ? 3.真正的按需編譯
好了,直接創(chuàng)一個demo看看把
$ npm init vite-app <project-name>
$cd<project-name>
$ npm install
$ npm run dev
這里把目錄貼出來看看有啥區(qū)別
├── index.html
├── package.json
├── public
│? └── favicon.ico
└── src
? ? ├── App.vue
? ? ├── assets
? ? │? └── logo.png
? ? ├── components
? ? │? └── HelloWorld.vue
? ? ├── index.css
? ? └── main.js
打開main.js和入口
從上面圖可以看出好像多了<script?type="module"?src="/src/main.js"></script>script module?是 ES 模塊在瀏覽器端的實現(xiàn)溜在，目前主流的瀏覽器都已經(jīng)支持,其最大的特點是在瀏覽器端使用?export陌知、import?的方式導入和導出模塊他托，在?script?標簽里設置?type="module"。瀏覽器會識別添加?type="module"的?<script>?元素仆葡，瀏覽器會把這段內(nèi)聯(lián) script 或者外鏈 script 認為是?ECMAScript?模塊赏参，瀏覽器將對其內(nèi)部的?import?引用發(fā)起 http 請求獲取模塊內(nèi)容。
vite的簡單配置如下:
import { resolve } from 'path';
function pathResolve(dir) {
? return resolve(__dirname, '.', dir);
}
module.exports = {
? /**
? * 在生產(chǎn)環(huán)境的基本公共路徑沿盅。
? * @default '/'
? */
? //base: '',
? /**
? * 構(gòu)建輸出目錄把篓。如果目錄存在，它將在構(gòu)建之前被刪除腰涧。
? * @default 'dist'
? */
? // outDir: 'dist,
? // 端口號
? // port: 3000,
? // 是否自動在瀏覽器打開
? // open: true,
? // 是否開啟 https
? // https: false,
? // 服務端渲染
? // ssr: false,
? // 引入第三方的配置
? /* optimizeDeps: {
? ? include: ['moment', 'axios'],
? }, */
? // 目錄別名
? alias: {
? ? '/@/': pathResolve('src'),
? },
? // 打包后靜態(tài)資源 js/css/image 存放目錄韧掩，@default '_assets'
? assetsDir: '',
? // 代理
? /* proxy: {
? ? ? ? '/api': {
? ? ? ? ? target: 'http://www.baidu.com',
? ? ? ? ? changeOrigin: true,
? ? ? ? ? rewrite: path => path.replace(/^\/api/, '')
? ? ? ? }
? ? } */
};
