Vue基础（十）——项目部署

一、 如何把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文件

 访问：http://127.0.0.1:3000/

  

三、配置文件的设置（开发环境和生产环境）

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,】