🪢Nginx前端部署测试🥓🎈【本地部署测试+线上部署】

🪢Nginx前端本地部署测试

前端开发中虽然把本地的前端包部署到线上 服务器,部署,测试...等都属于运维的工作范围内,但是作为一个前端开发者需要学会这些步骤的😬⚛:今天我就带大家先来个小实验,我们今天就尝试着进行本本地的nginx简单部署,等到后期,我们用购买的服务器进行线上的测试~~

下载nginx

在D盘创建Nginx_test文件夹,去nginx官网下载nginx,地址如下:

nginx.p2hp.com

点击图中的下载,跳转到下载页面进行下载即可,下载页面如下:

这里我们只是做下尝试,我下载的是最新版本的,如果大家在运行的过程中遇到了问题,可以下载稳定版本的。

解压完的文件如下:

创建一个vue项目

这里提供两种创建方式,大家依据情况而定。

1.利用vue脚手架创建:

vue create my_test1

大家可以根据自己的需要下载不同的版本,我们这里下载3的

2.利用vite创建:

npm create vite@latest

我们这里依旧是选择vue

我们以vite创建的项目进行演示

  1. 通过VScode打开项目,先通过npm install 下载依赖,npm run dev查看项目运行状态
  1. 下载路由,创建history路由

npm install vue-router@4

在src文件下创建router.js,代码如下

import { createRouter, createWebHistory } from 'vue-router'

const About = { template: '<div>About</div>' }
import HelloWorld from './components/HelloWorld.vue'
const routes = [
    { path: '/', component: HelloWorld },
    { path: '/about', component: About },

]


const router = createRouter({
    history: createWebHistory(),
    routes, // `routes: routes` 的缩写
})

export default router

App.vue 代码如下:

<script setup>
import HelloWorld from './components/HelloWorld.vue'
</script>

<template>
<!--  <div>-->
<!--    <a href="https://vitejs.dev" target="_blank">-->
<!--      <img src="/vite.svg" class="logo" alt="Vite logo" />-->
<!--    </a>-->
<!--    <a href="https://vuejs.org/" target="_blank">-->
<!--      <img src="./assets/vue.svg" class="logo vue" alt="Vue logo" />-->
<!--    </a>-->
<!--  </div>-->
<!--  <HelloWorld msg="Vite + Vue" />-->
  <router-view></router-view>
</template>

<style scoped>
.logo {
  height: 6em;
  padding: 1.5em;
  will-change: filter;
  transition: filter 300ms;
}
.logo:hover {
  filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.vue:hover {
  filter: drop-shadow(0 0 2em #42b883aa);
}
</style>

main.js添加router插件

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import router from "./router";
const app = createApp(App);

app.use(router)

app.mount('#app')

运行结果如下:

打包替换文件

npm run build 打包成dist文件后,替换nginx中html文件夹中的文件

打包后的dist文件夹中的文件放在如图中的文件夹里

打开nginx.conf文件进行配置

修改如下:

启动nginx

通过终端跳转到nginx文件夹,然后输入start nginx进行启动

效果如下:

OK,这样我们就简单的进行了一个本地的简单部署了。nginx的功能有很多,后期我们再进行一一讲解

 

然后本地部署成功后,可以在线上的服务器进行部署的,这里我发现了一个博友写了个线上的部署经验,可以参考参考哈哈😁😁😁:https://juejin.cn/post/7052952117425733663

 

posted @ 2025-02-11 11:20  Mahmud(مەھمۇد)  阅读(18)  评论(0编辑  收藏  举报