使用Vue3.0+vite初始化项目总结

2023-11-15 17:33:46

前言

众所周知，vue-cil@2.0集成的模块化工具是webpack,也是企业用的比较热门、成熟的模块化管理工具，那么除了webpack，比较热门的模块化工具还有snowpack、vite。

weback跟snowpack的区别：

注入css方式不同（大同小异）
他们都有loader处理器对css进行解析，但并不会直接生成单独的css文件（依附的是mini-css-extract-plugin），而是加载一个js模块，然后在模块中通过DOM中API将css文本作为style标签的内容插入页面中：
等于在index.html生成一个动态节点Style：text / css
生成 js 资源（css、图片…）都会加proxy
通过transformEsimports的方法调用，这个方法可以将js中import 模块路径进行转换，node modules替换为webmodules， wrapEsmProxyResponse 生成 Proxy模块方法，HMR: hot Module Replacement(热模块替换)
HMR 代码放在assets/hmr.js, 其中一个是：webpack向页面加script标签来加载 snowpack 使用原生 dynamic import 来加载

vite跟snowpack的特点差不多，它是一个不需打包的构建工具，开发时使用 es module 导入代码，生产环境用 rollup 构建。也具有：

1. 冷服务启动，原生，不进行build
2. 开发热更新
3. 按需编译，不会刷新DOM

但区别体现在：

vite更适合vue3.0去搭配使用（不兼容vue2.0），在生态上会更加融合，但毕竟是较新的模块工具（从兼容性就看出了），所以坑和需要优化的地方较多，不推荐实际企业开发中使用
snowpack现在已出现了v2 和向前兼容的v1,在vue、react、preact、svelte上都可以应用

vite的安装

$ npm init vite-app <project-name>
$ cd <project-name>
$ npm install
$ npm run dev

代码分析

关键变化是index.html中的入口文件导入方式

这样main.js中就可以使用ES6 Module方式组织代码

浏览器会自动加载这些导入，vite会启动一个本地服务器处理不同这些加载请求，对于相对地址的导入，要根据后缀名处理文件内容并返回，对于裸模块导入要修改它的路径为相对地址并再次请求处理。

再根据模块package.json中的入口文件选项获取要加载的文件。

资源分析

CSS文件导入

在我们程序中，除了全局样式大部分样式都是以形式存在于SFC中

CSS Module

JS中导入CSS Module：将css文件命名为*.module.css即可

css 预处理器
安装对应的预处理器就可以直接在vite项目中使用。

<style lang="scss">
/* use scss */
</style>

或者在JS中导入

import './style.scss'

PostCSS
*Vite自动对 .vue 文件和导入的.css 文件应用PostCSS配置，我们只需要安装必要的插件和添加 postcss.config.js 文件即可。

module.exports = {
  plugins: [
    require('autoprefixer'),
  ]
}

npm i postcss autoprefixer@8.1.4

资源URL处理

引用静态资源
我们可以在.vue 文件的template, style和纯.css文件中以相对和绝对路径方式引用静态资源。*（这个太爽了！！！）

<!-- 相对路径 -->
<img src="./assets/logo.png">
<!-- 绝对路径 -->
<img src="/src/assets/logo.png">

<style scoped>
#app {
  background-image: url('./assets/logo.png');
}
</style>

public目录
public 目录下可以存放未在源码中引用的资源，它们会被留下且文件名不会有哈希处理。
这些文件会被原封不动拷贝到发布目录的根目录下

注意引用放置在 public 下的文件需要使用绝对路径，例如 public/icon.png 应该使用 /icon.png引用

typescript整合

vite可直接导入.ts 文件，在SFC中通过<script lang="ts">使用
例如：使用ts创建一个组件

<script lang="ts">
import { defineComponent } from 'vue'

interface Course {
  id: number;
  name: string;
}
  
export default defineComponent({
  setup() {
    const state = ref<Course[]>([]);
    setTimeout(() => {
      state.value.push({ id: 1, name: "全栈架构师" });
    }, 1000);
  },
});
</script>

ts版本指定，package.json

{
  "devDependencies": {
    "typescript": "^3.9.7"
  }
}

ts参考配置，tsconfig.json

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "moduleResolution": "node",
    "isolatedModules": true,
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "experimentalDecorators": true,
    "lib": ["dom", "esnext"]
  },
  "exclude": ["node_modules", "dist"]
}

项目根目录创建vite.config.js，可以对vite项目进行深度配置。

代理（也是开发过程中比较关注的）

配置服务器代理，vite.config.js

export default {
  proxy: {
    '/api': {
      target: 'http://jsonplaceholder.typicode.com',
      changeOrigin: true,
      rewrite: path => path.replace(/^\/api/, '')
    }
  }
}

使用

fetch("/api/users")
  .then(response => response.json())
  .then(json => console.log(json));

数据mock

npm i mockjs -S
npm i vite-plugin-mock cross-env -D

引入插件，vite.config.js

plugins: [
  createMockServer({
    // close support .ts file
    supportTs: false,
  }),
],

设置环境变量，package.json

"dev": "cross-env NODE_ENV=development vite"

创建mock文件，mock/test.js

export default [
  {
    url: "/api/users",
    method: "get",
    response: req => {
      return {
        code: 0,
        data: [
          {
            name: "tom",
          },
          {
            name: "jerry",
          },
        ],
      };
    },
  },
  {
    url: "/api/post",
    method: "post",
    timeout: 2000,
    response: {
      code: 0,
      data: {
        name: "vben",
      },
    },
  },
];

模式和环境变量

使用模式做多环境配置，vite serve时模式默认是development，vite build时是production。
创建配置文件.env.development

VITE_TOKEN=this is token

代码读取

import.meta.env.VITE_TOKEN

打包和部署

打包

使用npm run build执行打包
部署

手动上传dist中的内容到服务器，再配置好nginx当然可以，但是也可以用自动化处理，避免前面这些繁琐的操作。可以利用github actions实现CI/CD过程，这里就不详细说了，大家可以自行去找有关资料和尝试实践一下，正所谓好记性不如烂笔头嘛。

有关文献

snowpack原理：https://www.ershicimi.com/p/6fa366feabbf503957831bcf8977f6bf
认识snowpack:https://zhuanlan.zhihu.com/p/108222057

欢迎关注我的博客： https://blog.csdn.net/weixin_42323607

github地址： https://github.com/NurTuam

多多支持！本人会持续更新哒 ❤️

码农公寓

前言