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

观无2025-05-03 18:55

案例代码链接：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;
        }
    }
}