前言

随着现在大家越来越卷，持续集成与部署大家都越来越熟练了，今天我就带大家先来个小实验，我们今天就尝试着进行本本地的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创建的项目进行演示

通过VScode打开项目，先通过npm install 下载依赖，npm run dev查看项目运行状态

下载路由，创建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')