yarn create vite my-vue-app --template vue 5.安装vite成功后,输入: cd my-vue-app yarn 安装vue 6.成功后, 输入: yarn dev 服务端启动vue 7.ctrl+鼠标点击打开项目地址:http://localhost:5173/ 8.可以使用: yarn run build 对项目进行打包 9.打包完的文件在dist目录下,注意: 1.有跨域保护,所以需要...
npm create vite@latest 兼容性注意 Vite 需要 Node.js 14.18+、16+版本,有些模板需要更高的版本 虽然创建项目用的14.17.5版本,但是后面运行项目用的18.15.0 HTML模板插件 npm i vite-plugin-html -D #vite.config.ts import {defineConfig} from"vite" import vue from'@vitejs/plugin-vue' import {create...
在vue-cli webpack的模板下的/config/index.js,我们可以看到assetsPublicPath这个键,并且这个东西还出现了两次,我第一次打包的时候,只是修改了最下面的assetsPublicPath,将它从'/'变为了./,然后我就执行了npm run build,打包成功之后,可以看到项目中会多出来一个文件夹,就是dist,里面有一个static文件夹和index.html...
npm install -g vite 1. 创建一个新的Vite项目: mkdir my-vite-app cd my-vite-app npm init vite 1. 2. 3. 3.根据需要选择框架(如React、Vue.js等)和模板(如JavaScript、TypeScript等)。 在项目的根目录中创建一个vite.config.js文件,并配置您的项目: // vite.config.js export default { // 配...
一、 使用Vite创建Vue3项目 1.全局安装vite，使用命令npm install vite -g 2.创建vue3项目，使用命令 npm create vite@latest ,确认项目名 称，选择Vue及TypeScript 3. 使用用vscode打开项目，运行命令 npm install npm run dev 4.整个项目目录结构如下：5.访问页面 二、将打包项目发布到Nginx 1.将打包后...
vue3作为国内主流开发框架,而vite又是vue团队推荐打包工具,在大多数的项目中都是部署在服务器上,通过http://协议访问ip、域名,但是在一些混合式开发如android或者electron中需要提供的html页面,然后使用file://协议访问。在这样的背景下就需要我们使用vite打包vue3项目支持file://协议访问。通过查找相关资料实现逻辑主要...
前言:vue项目打包后点击index.html文件时常时空白页面,vue2在配置文件配置后再点击时可以显示页面的,但vue3点击后是看不到页面的,暂时没找到解决方法,不过直接部署到nginx服务器再访问是可以访问到的, 路由文件的配置 vite文件配置base路径 npm run build打包后放到nginx服务器 然后访问即可 若是云服务器,也是同样的...
打包方式 vue-cli 自带的是 webpack 的打包方式,打出的包体积有点大,而 vite 自带的是 rollup 的打包方式,这种方式打包的体积就非常小,官网也有一些使用说明,所以学会之后还是比较很方便的。 vite 的库项目可以分为两类:(我自己分的) 一个是纯js的项目,不带HTML; ...
Vue.js作为一种流行的前端框架,具有简单、高效、灵活的特点,被广泛应用于各种Web项目中。然而,在开发过程中,我们可能需要将Vue库打包为一个单独的JavaScript文件,以便在浏览器或其他JavaScript环境中使用。这时,Vite工具就派上了用场。 Vite是一个由Vue.js团队开发的构建工具,它基于ESM(ECMAScript模块)提供极速的更新...
这样，你的 Vite 项目就可以通过生产不同环境的代码进行打包，适合不同环境的 API 接口。原文：vite项...