搭建并部署Vue3+TypeScript+Vite+ElementPlus项目

前言

搭建并部署Vue3+TypeScript+Vite+ElementPlus项目，重点如下：
1、使用yarn命令
2、从零搭建Vue3项目
3、打包带项目名的VUE项目
4、集成ElementPlus并打包成功
4、Nginx部署VUE项目并能正常访问

---

一、搭建Vue3项目

1、安装yarn命令

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

2、创建VUE项目

进入一个空目录，例如：D:\vue，项目名：zc_portal

yarn create @vitejs/app zc_portal
选择vue
选择vue-ts
cd zc_portal
yarn

3、安装VUE依赖

yarn install

4、启动VUE项目

yarn dev

5、访问VUE项目

6、打包VUE项目（带项目名）

打包前修改vite.config.ts文件添加项目名，如下：

yarn build

打包成功后会生成一个dist目录，里面包含打包文件，如下：

7、部署VUE项目

(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/

二、使用Visual Studio Code管理vue项目

1、引入VUE项目

2、解决vscode中不能使用yarn命令

首先，进入C:\Windows\System32\WindowsPowerShell\v1.0目录，找到powershell.exe文件。
右键该文件，以管理员权限执行。

然后，执行set-ExecutionPolicy RemoteSigned命令，并输入y选项
最后，重启Visual Studio Code再执行yarn dev就不报错了。

三、集成ElementPlus

1、安装Element Plus

yarn add element-plus

2、引入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')

3、使用Element Plus

在HelloWorld.vue文件中添加按钮，代码如下：

 <p>
    <el-button type="success">Element Plus按钮</el-button>
  </p>

本地启动访问效果如下：

4、打包Element Plus

(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项目搭建和部署完成。