项目目录

新建的项目目录缺少很多必要的目录和文件

要在src文件夹补充以下文件夹和文件

  • router文件夹，配置路由信息。
  • store文件夹，pinia和vuex相关内容
  • utils文件夹，工具类比如axios的二次封装request
  • components文件夹，一些公共的组件，比如文件上传，icon选择等。
  • assets文件夹，存放矢量文件svg和其他静态文件。
  • api文件夹，存放具体请求的方法，对外暴露。
  • views文件夹，最重要的文件夹，所有的路由组件都放在这个地方。
  • directive文件夹，存放自定义指令用来判断权限对菜单的展示是否隐藏
  • permission.ts文件，在src目录下与main.ts同级。用于判断是否登录，做路由守卫。

要做根文件夹添加开发和测试生产环境相关信息

  "scripts": {
    "dev": "vite",
    "build": "run-p type-check \"build-only {@}\" --",
    "preview": "vite preview",
    "build-only": "vite build",
    "type-check": "vue-tsc --build"
  }

.env.development文件

# 页面标题
VUE_APP_TITLE = demo1

# 开发环境配置
ENV = 'development'

# 
VUE_APP_BASE_API = '/dev-api'

# 路由懒加载
VUE_CLI_BABEL_TRANSPILE_MODULES = true

.env.production文件

# 页面标题
VUE_APP_TITLE = demo1

# 开发环境配置
ENV = 'production'

# 
VUE_APP_BASE_API = '/api'