vue3笔记（2-2）打包 & 部署

本篇基于技术栈 vue3 + vite。
vite 是 vue 官方推荐的项目构建工具，基于 rollup，构建速度更快，本篇记录使用过程，并且有一些疑惑在以后会一点点解决后再次记录。

环境变量-以 dev 环境为例

只有 VITE 开头的文件会被读取，其余文件会被拦截。
根目录下新建.env.dev文件

1
2
3
4
5
6
7
8
9
10
NODE_ENV = 'development'
VITE_APP_TITLE = 'development'
VITE_APP_INTERFACE_URL="" /* 请求接口地址 */
VITE_APP_MOCK = true
# 是否删除debugger
VITE_DROP_DEBUGGER=false
# 是否删除console.log
VITE_DROP_CONSOLE=false
# 是否sourcemap
VITE_SOURCEMAP=false

按照环境模式区分

package.json 中配置命令，其中 --host 可以在 dev 模式下，使用本机 IP访问系统，--mode 为启用对应的 .env 文件，vite中使用 dotenv 这个库，在开发代码里中可以使用 import.meta.env 获取对应模式配置文件下的全局变量， src/api/** 中使用 import.meta.env.VITE_APP_INTERFACE_URL 来获取当前环境下的 API 地址。

1
2
3
4
5
6
7
8
9
10
11
12
"scripts": {
   "start": "http-server ./dist -p 8083 --cors",
	"dev": "vite --mode dev  --host 0.0.0.0",
	"build": "vue-tsc && vite build",
	"preview": "vite preview",
	"build:dev": "vite build --mode dev",
	"build:server": "vite build --mode server",
	"lint:eslint": "eslint --fix --ext .js,.ts,.vue ./src",
	"lint:format": "prettier --write --loglevel warn \"src/**/*.{js,ts,json,tsx,css,less,vue,html,md}\"",
	"lint:style": "stylelint --fix \"**/*.{vue,less,postcss,css,scss}\" --cache --cache-location node_modules/.cache/stylelint/",
	"lint-staged": "lint-staged"
 },

详细配置见 vue3笔记（18-1）使用vite进行前端构建