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.有跨域保护,所以需要...
// compiler: false, // webpack配置 // see https://github.com/vuejs/vue-cli/blob/dev/docs/webpack.md chainWebpack: () => {}, configureWebpack: () => {}, // vue-loader 配置项 // https://vue-loader.vuejs.org/en/options.html // vueLoader: {}, // 生产环境是否生成 sourceMa...
一、 使用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项目开发环境连接后端和打包部署连接后端设置是不一样的:一个是直接在vite.config.ts中配置,一是要用nginx来做代理;二是注意nginx的配置的地址后面的"/"。
Vue 官方文档 具体配置可供参考如下: 先简要介绍下,当前项目打包部署不是在服务器的根目录下,所以 nigix 配置了一层 root 的指向; 一.nigix try_files file ... uri && try_files file ... = code try_files 即通过配置的$url按顺序进行目录下资源文件 index.html 的检索,返回其结果文件或文件夹,其中$...
import{fileURLToPath,URL}from"node:url";import{defineConfig}from"vite";importvuefrom"@vitejs/plugin-vue";importqiankunfrom"vite-plugin-qiankun";exportdefaultdefineConfig({// 开发或生产环境服务的公共基础路径base:"/subapp/sub-vue3-vite",// 将目录设定为静态资源服务目录,可设置 false 关闭public...
vue3作为国内主流开发框架,而vite又是vue团队推荐打包工具,在大多数的项目中都是部署在服务器上,通过http://协议访问ip、域名,但是在一些混合式开发如android或者electron中需要提供的html页面,然后使用file://协议访问。在这样的背景下就需要我们使用vite打包vue3项目支持file://协议访问。通过查找相关资料实现逻辑主要...
Vite部署静态站点官方文档 一、本地打包测试 构建应用(打包) npm run build 默认情况下,构建会输出到 dist 文件夹中。 本地测试应用 当你构建完成应用后,你可以通过运行npm run preview命令,在本地测试该应用,利用好控制台,找BUG修BUG。 每次修改代码后要先build构建打包再preview本地测试才能显示出修改代码后最新...
本博客是总结本人在linux服务器上将vue项目部署到Nginx上的经历 一.准备好vue项目 1.安装vue环境 2.打包vue项目 进入你项目的文件夹,找到config文件夹下的index.js文件(config/index.js),打开修改里面assetsPublicPath为 ./(注意一定是build里面的,dev中也有这个配置,dev里的不用修改) ...