项目里面,引入文件:"../assets/vue.svg"、"../components/HelloWorld.vue"改为"@/assets/vue.svg"、"@/components/HelloWorld.vue"
一、 使用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的配置的地址后面的"/"。
import{ defineConfig }from"vite";importvuefrom"@vitejs/plugin-vue";exportdefaultdefineConfig({build: {//打包文件目录outDir:"es",//压缩//minify: false,rollupOptions: {//忽略打包vue文件external: ["vue"],input: ["index.ts"],output: [ {//打包格式format:"es",//打包后文件名entryFileNames...
vite.config.js 是一个配置文件，用于定制和优化 Vite 项目的开发和打包过程。通过该配置文件，可以调整项目的开发服务器设置、构建选项、使用插件以及其他高级功能，以满足项目的具体需求。视频 基础配置项 server 选项 本地运行时，开发环境服务器的配置。host 默认 localhost，设置为 true 或 0.0.0.0 时会监听...
3. vite打包配置 因为是需要单独的当作sdk库使用, 所以需要把组件的css打包到js中 所以需要安装vite插件vite-plugin-css-injected-by-js pnpm add vite-plugin-css-injected-by-js -D 配置vite.config.js import{defineConfig}from'vite'importvuefrom'@vitejs/plugin-vue'importcssInjectedByJsPluginfrom'vite-pl...
一、Svg配置 每次引入一张SVG图片都需要写一次相对路径,并且对SVG图片进行压缩优化也不够方便。 vite-svg-loader插件加载SVG文件作为Vue组件,使用SVGO进行优化。 插件网站https://www.npmjs.com/package/vite-svg-loader 1. 安装 pnpm i vite-svg-loader-D ...
搭建第一个 Vite 项目 使用NPM: $ npm create vite@latest 使用Yarn: $ yarn create vite 使用PNPM: $ pnpm create vite 1. 2. 3. 4. 5. 6. 7. 8. 然后按照提示操作即可! 你还可以通过附加的命令行选项直接指定项目名称和你想要使用的模板。例如,要构建一个 Vite + Vue 项目,运行: ...