搭建并部署Vue3+TypeScript+Vite+ElementPlus项目，重点如下：
1、使用yarn命令
2、从零搭建Vue3项目
3、打包带项目名的VUE项目
4、集成ElementPlus并打包成功
4、Nginx部署VUE项目并能正常访问
1、安装yarn
npm install -g yarn
#更换淘宝镜像
yarn config set registry https://registry.npm.taobao.org
#移除原代理
yarn config delete proxy
npm config rm proxy
npm config rm https-proxy
#安装cnpm镜像
npm install -g cnpm --registry=https://registry.npm.taobao.org
#使用代理registry
npm config set registry https://registry.npm.taobao.org
进入一个空目录，例如：D:\vue，项目名：zc_portal
yarn create @vitejs/app zc_portal
选择vue
选择vue-ts
cd zc_portal
yarn
yarn install
yarn dev
打包前修改vite.config.ts文件添加项目名，如下：
yarn build
打包成功后会生成一个dist目录，里面包含打包文件，如下：
(1)使用nginx部署VUE项目
Window安装nginx过程略，nginx安装目录：D:\software\nginx
(2)将VUE打包后的文件复制到指定目录。
例如D:\software\run\portal\zc_portal
(3)配置nginx.conf文件
进入D:\software\nginx\conf目录，打开nginx.conf文件，内容如下：
#user nobody;
worker_processes 1;
events {
worker_connections 1024;
}
http {
include mime.types;
default_type application/octet-stream;
sendfile on;
#tcp_nopush on;
#keepalive_timeout 0;
keepalive_timeout 65;
#gzip on;
server {
# 端口
listen 8001;
# 服务器名字
server_name localhost;
# 前端
location / {
root D:/software/run/portal;
index index.html;
try_files $uri $uri/ /index.html;
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root html;
}
}
}
注：
1、root值为D:/software/run/portal代表nginx部署文件的根目录，zc_portal为项目目录，不能在这里配置。
2、斜杠为/
3、端口为8001，可以按实际情况修改。
(4)启动nginx
双击D:\software\nginx\nginx.exe
一闪而过，在任务管理器中可以看到nginx进程
(5)访问VUE项目
http://localhost:8001/zc_portal/
首先，进入C:\Windows\System32\WindowsPowerShell\v1.0目录，找到powershell.exe文件。
右键该文件，以管理员权限执行。
然后，执行set-ExecutionPolicy RemoteSigned命令，并输入y选项
最后，重启Visual Studio Code再执行yarn dev就不报错了。
yarn add element-plus
在main.ts文件添加如下内容：
import { createApp } from 'vue'
import App from './App.vue'
const app = createApp(App)
// 引入element-plus
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
app.use(ElementPlus)
app.mount('#app')
在HelloWorld.vue文件中添加按钮，代码如下：
<p>
<el-button type="success">Element Plus按钮</el-button>
</p>
本地启动访问效果如下：
(1)在tsconfig.json文件中添加"skipLibCheck": true，代码如下：
// vue3 + typescript + elementPlus生产包打包报错
"skipLibCheck": true
截图如下：
(2)在vite.config.ts文件中压缩文件，代码如下：
// 打包
build: {
outDir: "dist", // 指定打包输出路径
assetsDir: "assets", // 指定静态资源存放路径
minify: 'terser', // 混淆器,terser构建后文件体积更小
target: "modules", // 指定es版本,浏览器的兼容性
sourcemap: false, // 是否构建source map 文件
cssCodeSplit: true, // css代码拆分,禁用则所有样式保存在一个css里面
chunkSizeWarningLimit: 1500, // 文件大小限制
terserOptions: {
compress: {
drop_console: true, // 生产环境移除console
drop_debugger: true // 生产环境移除debugger
}
},
rollupOptions: {
output: {
manualChunks(id) {
// 解决【Vue3】vite打包报错：块的大小超过限制，Some chunks are larger than 500kb after minification
if (id.includes('node_modules')) {
return id.toString().split('node_modules/')[1].split('/')[0].toString();
}
},
chunkFileNames: (chunkInfo) => {
const facadeModuleId = chunkInfo.facadeModuleId ? chunkInfo.facadeModuleId.split('/'): [];
const fileName = facadeModuleId[facadeModuleId.length - 2] || '[name]';
return `js/${fileName}/[name].[hash].js`;
}
}
}
}
截图如下：
(3)打包VUE项目
yarn build
打包成功后多了一个js目录
将打包后的文件复制到nginx指定目录
D:\software\run\portal\zc_portal
(4)访问Element Plus
至此，Vue3+TypeScript+Vite+ElementPlus项目搭建和部署完成。