vue3-vite2-cli

🚀 vue3+vite2 搭建脚手架，己集成vue全家桶,

_{Made with ❤︎ by Ikarows}

项目地址

git clone https://github.com/Ikarows/vue3-vite2-cli.git

node 版本推荐

因为该模板采用目前较新技术栈，所以推荐大家使用 node 当前的长期维护版本 v16， 大于 v16.13.1 即可。

技术栈

• Vue3
• Vite2
• Vant3
• VueRouter
• Axios
• Pinia
• Eslint
• Sass

开发

# install cnpm
npm install cnpm -g --registry=https://registry.npm.taobao.org;

# install dependencies
cnpm i

# strat
npm run serve

# build
npm run build

# eslint
npm run lint

项目目录

├── .vscode            # vscode配置
├── public             # 静态文件
├── src                # 项目文件夹
│   ├── api            # API接口
│   ├── assets         # 资源文件夹
│   │   ├── img        # 图库
│   │   ├── js         # 脚本
│   │   └── css        # 样式（scss, css, less）
│   ├── components     # 公用组件
│   ├── config         # 配置文件
│   │   ├── http.js    # axios 封装
│   │   └── request.js # 请求封装(get，post)
│   ├── views          # 页面目录
│   ├── router         # 路由目录
│   ├── store          # Pinia 目录
│   ├── utils          # 公用方法目录
│   ├── App.vue        # vue 根文件
│   └── main.js        # vue 入口js
│
├── .env.development   # 开发环境变量
├── .env.production    # 生产环境变量
├── .env.release       # 线上环境变量
├── .eslintignore      # eslint忽略文件
├── .eslintrc.js       # eslint配置
├── .gitignore         # git忽略文件
├── package.json       # 依赖包
├── README.md          # 项目说明
├── upload.js          # 自动化部署
└── vite.config.js      # vite配置文件

自动化部署

• upload.js 文件中配置

例子如下

const serve = {
  dev: {
    // 测试服务器
    host: '', // 服务器的IP地址
    port: '22', // 服务器端口， 一般为 22
    username: '', // 用户名
    password: '', // 密码
    // privateKey: require('fs').readFileSync('D:\\key.ppk'),
    passphrase: 'private_key_password',
    path: '' // 项目部署的服务器目标位置
  },
  pro: {
    // 正式服务器
    host: '', // 服务器的IP地址
    port: '22', // 服务器端口， 一般为 22
    username: '', // 用户名
    password: '', // 密码
    // privateKey: require('fs').readFileSync('D:\\key.ppk'),
    passphrase: 'private_key_password',
    path: '' // 项目部署的服务器目标位置
  }
}

• 打包发布到测试服务器

npm run deploy -- dev

• 打包发布到正式服务器

npm run deploy -- pro

代理模式

• vue.config.js 文件中配置

例子如下

proxy: {
  '/api': {
    target: 'http://127.0.0.1:7001',
    changeOrigin: true,
    rewrite: path => path.replace(/^\/api/, '')
  }
}