Vue基础（十）——项目部署
pro1822
已于 2022-09-02 11:05:47 修改
阅读量1.7k
收藏
1
点赞数
1
已于 2022-09-02 11:05:47 修改
阅读量1.7k
收藏
1
点赞数
1
于 2022-09-02 11:02:58 首次发布
本文详细介绍了如何将Vue项目部署到Web服务器，包括使用`npm run build`打包，通过Koa框架提供静态文件服务，以及在开发和生产环境下的不同配置文件`.env.development`和`.env.production`的使用。通过设置`VUE_APP_XXXX`变量，实现了环境变量在不同阶段的读取。
一、 如何把Vue的项目部署到web服务器上？
1、使用以下命令： 将整个Vue项目打包成一个静态文件（html、css、js）。
npm run build（1）后台serve.js关键代码：
//静态目录
const static = require("koa-static");
app.use(static(__dirname + "/public"))（2）把静态文件放在【public】文件夹下，就可以访问了
2、在服务器上发布
二、实际操作——测试简单项目部署到服务器上
1、找一个项目（example01），运行npm run build
打包完成后，发现多了一个dist文件夹。
2、准备一个Koa框架的项目（example02）
将里面的文件，复制到example02项目的public文件夹下。
3、运行js文件
三、配置文件的设置（开发环境和生产环境）
1、开发阶段：【.env.development】
2、生产环境（build之后，发布后环境）：【.env.production】
3、注意：配置文件中的命名变量必须以【VUE_APP_XXXX】命名。
1、创建配置文件：
2、配置文件中写值：
3、App.vue：
<template>
<div>
<h1>{{title}}</h1>
</div>
</template>
<script>
export default {
data() {
return {
title: process.env.VUE_APP_TITLE,
};
},
};
</script>4、重新部署example01【npm run build】，再复制到example02的public中
5、浏览器访问： http://localhost:3000/
6、浏览器访问： http://localhost:8080/
在开发环境中，读取的是开发的配置文件。
在生产环境中（已build后，发布出去的），读取的是生产的配置文件。
关键代码：【title: process.env.VUE_APP_TITLE,】
扫一扫
7564
暂无认证
到【灌水乐园】发言
普通网友: 浮动布局感觉好难理解 T.T
CamphorBloom: @晓舟报告
programmer11123: 晓舟报告+1
兴趣使然的程序猿: 很棒