vite搭配vue2创建工程

一、安装vite

npm init vite@2.8.0

vite默认支持的是vue3, 这里选择框架和版本vanilla, 方便以后自己安装vue2.

二、修改package.json

默认生成的pacakage.json文件

{
  "name": "vite-project",
  "private": true,
  "version": "0.0.0",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },
  "devDependencies": {
    "vite": "^2.8.0"
  }
}

修改这几个部分:scripts、devDependencies、dependencies

将其修改为:

{
  "name": "vite-project",
  "private": true,
  "version": "0.0.0",
  "scripts": {
    "serve": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },
  "devDependencies": {
    "vite": "^2.8.0",
    "vite-plugin-vue2": "^2.0.3"
  },
  "dependencies": {
    "vue": "^2.6.11",
    "vue-router": "^3.2.0",
    "vuex": "^3.4.0",
    "axios": "^0.24.0",
    "element-ui": "^2.15.6",
    "vue-template-compiler": "^2.6.11"
  }
}

三、根据package.json安装依赖

执行命令

npm install

四、在工程根目录下新增文件:vite.config.js

import { defineConfig } from 'vite' // 动态配置函数
import { createVuePlugin } from 'vite-plugin-vue2'
import { resolve } from 'path'

export default () =>
	defineConfig({
		plugins: [createVuePlugin()],
		server: {
			open: true, //自动打开浏览器
			port: 8888 //端口号
		},
		resolve: {
            // 别名
			alias: [
				{
					find: '@',
					replacement: '/src'
				}
			]
		}
	})

五、将医保大屏工程的src整个文件夹拷贝至根目录下,如图

六、运行工程:npm run serve

七、ps:补充代理知识:

1.正向代理:代理了客户端,服务端不清楚是哪个客户端访问的。
2.反向代理:代理了服务端,客户端不清楚是哪个服务端返回的。

1.正向代理:A想买东西,国内买不到,找代购,代购去厂商那里买,厂商只知道代购购买这个商品,并不知道代购给谁,不知道A的存在。
2.反向代理:A有一个朋友C(百晓生),A问C一个问题,C一看是医学问题,马上去问医生朋友,然后再告诉A。A又问C一个问题,C一看是法律问题,然后去问他的了不是朋友,再告诉A。
总结:同样都是转发请求,但是处理方式不同,专业术语不同。

遇到require问题参考链接:https://dajianshi.blog.csdn.net/article/details/135822197

  • 10
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值