public 目录下可以存放未在源码中引用的资源，它们会被留下且文件名不会有哈希处理。
这些文件会被原封不动拷贝到发布目录的根目录下。
<img src="/logo.png">
注意引用放置在 public 下的文件需要使用绝对路径，例如 public/icon.png 应该使用 /icon.png引用
我们借助eslint规范项目代码，通过prettier做代码格式化。
首先在项目安装依赖，package.json
"scripts": {
"lint": "eslint \"src/**/*.{js,vue}\""
"devDependencies": {
"@vue/eslint-config-prettier": "^6.0.0",
"babel-eslint": "^10.1.0",
"eslint": "^6.7.2",
"eslint-plugin-prettier": "^3.1.3",
"eslint-plugin-vue": "^7.0.0-0",
"prettier": "^1.19.1"
然后配置lint规则，.eslintrc.js
module.exports = {
root: true,
env: {
node: true,
extends: ["plugin:vue/vue3-essential", "eslint:recommended", "@vue/prettier"],
parserOptions: {
parser: "babel-eslint",
rules: {
"no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
"no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off",
"prettier/prettier": [
"warn",
trailingComma: "es5",
如果有必要还可以配置prettier.config.js修改prettier的默认格式化规则
module.exports = {
printWidth: 80,
tabWidth: 2,
useTabs: false,
singleQuote: false,
semi: true,
trailingComma: 'es5',
bracketSpacing: true,
jsxBracketSameLine: false,
arrowParens: "avoid",
利用jest和@vue/test-utils测试组件
"jest": "^24.0.0",
"vue-jest": "^5.0.0-alpha.3",
"babel-jest": "^26.1.0",
"@babel/preset-env": "^7.10.4",
"@vue/test-utils": "^2.0.0-beta.9"
配置babel.config.js
module.exports = {
presets: [
"@babel/preset-env", {
targets: {
node: "current"
配置jest.config.js
module.exports = {
testEnvironment: "jsdom",
transform: {
"^.+\\.vue$": "vue-jest",
"^.+\\js$": "babel-jest"
,
moduleFileExtensions: ["vue", "js", "json", "jsx", "ts", "tsx", "node"],
testMatch: ["**/tests/**/*.spec.js", "**/__tests__/**/*.spec.js"],
moduleNameMapper: {
"^main(.*)$": "<rootDir>/src$1",
"test": "jest --runInBand"
测试代码，tests/example.spec.js
import HelloWorld from "main/components/HelloWorld.vue";
import { shallowMount } from "@vue/test-utils";
describe("aaa", () => {
test("should ", () => {
const wrapper = shallowMount(HelloWorld, {
props: {
msg: "hello,vue3",
});
expect(wrapper.text()).toMatch("hello,vue3");
});
});
lint配置添加jest环境，要不然会有错误提示：
module.exports = {
env: {
jest: true
将lint、test和git挂钩
npm i lint-staged yorkie -D
"gitHooks": {
"pre-commit": "lint-staged",
"pre-push": "npm run test"
"lint-staged": {
"*.{js,vue}": "eslint"
正常情况下安装 yorkie 后会自动安装提交钩子 如果提交钩子未生效可以手动运行 node node_modules/yorkie/bin/install.js 来安装。 当然，你也可以运行 node node_modules/yorkie/bin/uninstall.js 来卸载提交钩子。
vite可直接导入.ts 文件，在SFC中通过<script lang="ts">使用
范例：使用ts创建一个组件
<script lang="ts">
import { defineComponent } from 'vue'
interface Course {
id: number;
name: string;
export default defineComponent({
setup() {
const state = ref<Course[]>([]);
setTimeout(() => {
state.value.push({ id: 1, name: "全栈架构师" });
}, 1000);
});
</script>
ts版本指定，package.json
"devDependencies": {
"typescript": "^3.9.7"
ts参考配置，tsconfig.json
"compilerOptions": {
"target": "esnext",
"module": "esnext",
"moduleResolution": "node",
"isolatedModules": true,
"strict": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
"experimentalDecorators": true,
"lib": ["dom", "esnext"]
"exclude": ["node_modules", "dist"]
项目根目录创建vite.config.js，可以对vite项目进行深度配置。
导入的别名，避免出现大量相对路径，优雅且不易出错
给src/components定义别名，vite.config.js
const path = require("path");
module.exports = {
alias: {
"/comps/": path.resolve(__dirname, "src/components"),
import CourseAdd from "/comps/CourseAdd.vue";
import Comp from "/comps/Comp.vue";
配置服务器代理，vite.config.js
export default {
proxy: {
'/api': {
target: 'http://jsonplaceholder.typicode.com',
changeOrigin: true,
rewrite: path => path.replace(/^\/api/, '')
fetch("/api/users")
.then(response => response.json())
.then(json => console.log(json));
npm i mockjs -S
npm i vite-plugin-mock cross-env -D
引入插件，vite.config.js
plugins: [
createMockServer({
supportTs: false,
}),
设置环境变量，package.json
"dev": "cross-env NODE_ENV=development vite"
创建mock文件，mock/test.js
export default [
url: "/api/users",
method: "get",
response: req => {
return {
code: 0,
data: [
name: "tom",
name: "jerry",
url: "/api/post",
method: "post",
timeout: 2000,
response: {
code: 0,
data: {
name: "vben",
使用模式做多环境配置，vite serve时模式默认是development，vite build时是production。
创建配置文件.env.development
VITE_TOKEN=this is token
代码中读取
import.meta.env.VITE_TOKEN
使用npm run build执行打包
手动上传dist中的内容到服务器，再配置好nginx当然可以，但是这一过程最好自动化处理，避免前面这些繁琐的操作。我们这里利用github actions实现ci/cd过程。
Github Actions让我们可以在Github仓库中直接创建自定义的软件开发生命周期工作流程。
准备工作：
阿里云linux服务器
linux操作
阿里云相关操作
第一步：配置workflow，下面的配置可以在我们push代码时自动打包我们应用并部署到阿里云服务器上，在项目根目录下创建.github/workflows/publish.yml
name: 打包应用并上传阿里云
push:
branches:
- master
jobs:
build:
# runs-on 指定job任务运行所需要的虚拟机环境(必填字段)
runs-on: ubuntu-latest
steps:
# 获取源码
- name: 迁出代码
# 使用action库 actions/checkout获取源码
uses: actions/checkout@master
# 安装Node10
- name: 安装node.js
# 使用action库 actions/setup-node安装node
uses: actions/setup-node@v1
with:
node-version: 14.0.0
# 安装依赖
- name: 安装依赖
run: npm install
- name: 打包
run: npm run build
# 上传阿里云
- name: 发布到阿里云
uses: easingthemes/ssh-deploy@v2.1.1
env:
SSH_PRIVATE_KEY: ${{ secrets.PRIVATE_KEY }}
# scp参数
ARGS: "-avzr --delete"
# 源目录
SOURCE: "dist"
# 服务器ip：换成你的服务器IP
REMOTE_HOST: "47.98.252.43"
REMOTE_USER: "root"
# 目标地址
TARGET: "/root/vue-in-action"
第二步：在github当前项目下设置私钥选项
复制本地私钥，~/.ssh/id_rsa
# ssh秘钥生成过程自行百度
cd .ssh/
cat id_rsa
复制并填写到github-secretes
第三步：在阿里云服务器上配置nginx
登录服务器
ssh root@47.98.252.43 # ip换成你的
配置nginx
cd /etc/nginx/sites-enabled/
vi vue-in-action
添加如下配置
server {
listen 8080;
server_name 47.98.252.43;
location / {
root /root/vue-in-action/dist/;
index index.html index.htm;
重启nginx：nginx -s reload
第四步：push代码，触发workflow
大功告成，激动，赶紧验证一下上传结果
访问：47.98.252.43:8080 试试效果吧！！！
我专门录了一套视频演示本文所做的所有操作，喜欢看视频学习的小伙伴移步：
「村长」vite工程化
制作不易，求一个3连关注不过分吧！？
后续我打算把一系列项目实践内容整合进来，包括不限于如下内容：
样式管理页面布局权限控制图标管理请求封装数据可视化
大家点个赞，收藏一下，以便后续学习。
关于工程化就说到这里，这篇内容折腾了很久，踩了不少坑，掉了几根头发，小伙伴们点个赞👍鼓励一下。
