前面我们体验了vue3.0一些新的api,那就赶快把架子速度搭起来把.当然右大大新的东西 ‘ vite’也要配起来.
vite一出表示再也回不去 webpack 了, 还引来了 webpack 核心开发人员肖恩的搞笑回复如下:
那就让我们一起来看一下 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和入口
从上面图可以看出好像多了<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/, '')
}
} */
};
