🪢Nginx前端部署测试🥓🎈【本地部署测试+线上部署】
🪢Nginx前端本地部署测试
前端开发中虽然把本地的前端包部署到线上 服务器,部署,测试...等都属于运维的工作范围内,但是作为一个前端开发者需要学会这些步骤的😬⚛:今天我就带大家先来个小实验,我们今天就尝试着进行本本地的nginx简单部署,等到后期,我们用购买的服务器进行线上的测试~~
下载nginx
在D盘创建Nginx_test文件夹,去nginx官网下载nginx,地址如下:
点击图中的下载,跳转到下载页面进行下载即可,下载页面如下:
这里我们只是做下尝试,我下载的是最新版本的,如果大家在运行的过程中遇到了问题,可以下载稳定版本的。
解压完的文件如下:
创建一个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')
运行结果如下:
打包替换文件
npm run build 打包成dist文件后,替换nginx中html文件夹中的文件
打包后的dist文件夹中的文件放在如图中的文件夹里
打开nginx.conf文件进行配置
修改如下:
启动nginx
通过终端跳转到nginx文件夹,然后输入start nginx进行启动
效果如下:
OK,这样我们就简单的进行了一个本地的简单部署了。nginx的功能有很多,后期我们再进行一一讲解
然后本地部署成功后,可以在线上的服务器进行部署的,这里我发现了一个博友写了个线上的部署经验,可以参考参考哈哈😁😁😁:https://juejin.cn/post/7052952117425733663