详解vite2.0配置学习(typescript版本)

网络编程 2024/12/22 佚名

3 1 2

介绍

尤于溪的原话。

vite与 Vue CLI 类似，vite 也是一个提供基本项目脚手架和开发服务器的构建工具。
vite基于浏览器原生ES imports的开发服务器。跳过打包这个概念，服务端按需编译返回。
vite速度比webpack快10+倍，支持热跟新，但是出于处于测试阶段。
配置文件也支持热跟新！！！

创建

执行npm init @vitejs/app ，我这里选择的是vue-ts

版本

"vite": "^2.0.0-beta.48"

alias别名

vite.config.ts

const path = require('path')
 alias: {
  "@": path.resolve(__dirname, "src"),
  "@c": path.resolve(__dirname, "src/components")
 },

环境变量配置

1、在根目录创建

2、只有前缀为的变量VITE_才对Vite处理的代码公开。一以下为.env.production文件，其它类似。
shell # 开发环境 VITE_APP_ENV = 'development' # api 地址 VITE_APP_PATH = 'dev/...'

3、启动文件package.json,在命令后面加上--mode test就好了，这个跟vue2一样

"dev:test": "vite --mode test",

4、使用,跟vue2有些区别，在vite.config.ts内读取不到，其它文件可以拿到

import.meta.env

输出为：

添加vue-router（vue3使用4.0+版本）

1、安装

npm i vue-router@4.0.2 --save,安装4.0版本

2、index.ts

import {createRouter, createWebHashHistory, RouteRecordRaw} from 'vue-router'
// @ts-ignore
const test = () => import('../views/test1.vue')
const routes: Array<RouteRecordRaw> = [
  {path: "/", redirect: "/test1"},
  {
    path: "/test1",
    name: 'test1',
    component: test,
  }
]
const router = createRouter({
  history: createWebHashHistory(),
  routes: routes
})

export default router

3、 main.ts

import router from "./router"
createApp(App)
  .use(router)
  .mount('#app')

添加vuex(版本同样要4以上)

1、安装

npm i vuex@index -D

2、store/index.ts

import { createStore } from 'vuex'

export default createStore({
 state: {
 },
 //...
})

3、main.ts

import store from './store'

createApp(App)
  .use(store)
  .mount('#app')

scss环境

1、安装npm i sass -D，可以直接使用sass语法了
2、vite.config.ts,全局引入scss文件

css: {
  preprocessorOptions: {
   scss: {
    additionalData: `@import "./src/assets/scss/global.scss";`//你的scss文件路径
   }
  }
 },

vite2.0配置,vite,配置

风云阁资源网 Design By www.bgabc.com

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！

风云阁资源网 Design By www.bgabc.com

评论“详解vite2.0配置学习(typescript版本)”

暂无评论...

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒经典版》的玩家都可以获得奖励。

更新日志

2024年12月22日