当前位置：首页 > backend >正文

Nginx部署Vue+ElementPlus应用案例（基于腾讯云）

backend 2025/5/4 6:27:47

案例代码链接：https://download.csdn.net/download/ly1h1/90735035

1.参考链接：

基于以下两个链接的参考，创建项目

1.1.基于Vue3前端项目创建-CSDN博客

1.2.基于Vue3引入ElementPlus_vue如何引入elementplus-CSDN博客

2.修改main.js，引入资源

import { createApp } from 'vue'
import { createPinia } from 'pinia'import App from './App.vue'
import router from './router'import './assets/main.css'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
const app = createApp(App)app.use(createPinia())
app.use(router)app.mount('#app')

3.修改App.Vue，修改显示内容

<template><div><h1>我的 Vue 项目</h1><el-button type="primary">Element Plus 按钮测试</el-button></div>
</template><script setup>
import { ElButton } from 'element-plus'
</script>

4.输入npm run build，生成发布文件dist

5.下载Nginx

链接为：nginx: download

6.解压到本地文件

7.将发布文件dist复制到nginx目录下

8.配置conf文件夹下的nginx.conf文件

worker_processes  1;events {worker_connections  1024;
}http {include       mime.types;default_type  application/octet-stream;server {listen       8069;server_name  43.161.118.209;# 指向你的dist目录root   C:/nginx/nginx-1.27.5/dist;index  index.html;location / {try_files $uri $uri/ /index.html;}}
}