打包部署

开始之前

为了验证打包后的程序问题，很多时候需要本地进行打包测试。本次主要讲解本地打包和使用包，以PF为例，脚手架为 VUE-CLI。

# 打包

# 配置打包命令

一般来讲打包环境分为开发环境和生产环境（也可以根据需求新增测试环境等等。）

// package.json文件中
"scripts": {
  "build:dev": "vue-cli-service build --mode development",
  "build:prod": "vue-cli-service build --mode production"
}

development 开发环境
production 生产环境

--mode 打包模式

# 模式

模式是 Vue CLI 项目中一个重要的概念。默认情况下，一个 Vue CLI 项目有三个模式：

development 模式用于 vue-cli-service serve
test 模式用于 vue-cli-service test:unit
production 模式用于 vue-cli-service build

你可以通过传递 --mode 选项参数为命令行覆写默认的模式。例如，如果你想要在构建命令中使用开发环境变量：

vue-cli-service build --mode development

当运行 vue-cli-service 命令时，所有的环境变量都从对应的环境文件中载入。如果文件内部不包含 NODE_ENV 变量，它的值将取决于模式，例如，在 production 模式下被设置为 "production"，在 test 模式下被设置为 "test"，默认则是 "development"。

# 配置环境变量

你可以在你的项目根目录中放置下列文件来指定环境变量：

.env                # 在所有的环境中被载入
.env.local          # 在所有的环境中被载入，但会被 git 忽略
.env.[mode]         # 只在指定的模式中被载入
.env.[mode].local   # 只在指定的模式中被载入，但会被 git 忽略

装配 PF 中就设置了 production 环境变量和 development环 境变量

一个环境文件只包含环境变量的“键=值”对：

dev 名字与 package.json 中的 mode 对应

## 开发环境
NODE_ENV=development
## 必须以VUE_APP开头
VUE_APP_GLOB_API_URL = "http://10.10.78.75:10168/api"
VUE_APP_GLOB_APP_SCOKET = "//10.10.78.75:10168"
VUE_APP_GLOB_APP_SERVER_NAME = "/AssemblyLine"

注意

不要在你的应用程序中存储任何机密信息（例如私有 API 密钥）！
环境变量会随着构建打包嵌入到输出代码，意味着任何人都有机会能够看到它。

请注意，只有 NODE_ENV，BASE_URL 和以 VUE_APP_ 开头的变量将通过 webpack.DefinePlugin 静态地嵌入到客户端侧的代码中。这是为了避免意外公开机器上可能具有相同名称的私钥。

# 打包产物

执行完相应的打包命令后，在项目根目录下会生成一个dist文件夹

dist 文件生成内容会根据具体的打包配置生成

# 部署

# 部署到本地

将dist包放进后端相应的目录下，即可实现本地部署

# 部署到服务器

可使用 web 服务器进行部署，例如 nginx

server {
    listen       80;
    server_name  localhost;

    #charset koi8-r;

    #access_log  logs/host.access.log  main;

    location / {
        root   /usr/share/nginx/html;
        index  index.html index.htm;
    }

    #error_page  404              /404.html;

    # redirect server error pages to the static page /50x.html
    #
    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   /usr/share/nginx/html;
    }
}

# 本地使用 npx 运行部署包

一般前端不会有后端服务，所以需要使用 npx 运行部署包

进入 dist 目录
打开 powershell(建议用管理员身份运行 powershell)，输入npx http-server -p xxxx
- -p 后跟端口号，例如npx http-server -p 8080

默认是本地ip和localhost，如果需要指定 ip，则可以http-server -p 8080 -P http://10.10.78.74:2000。
-P 后可指定代理地址

← 浏览器常见调试方法 eslint→