vue-llplatform

构建发布

本章节介绍如何构建发布系统。

开发

开发时使用的接口数据有两种方式：

  1. 本地mock：注释.env.development的VUE_APP_BACK_END_URL值
  2. 某一测试后台返回值：设置.env.development的VUE_APP_BACK_END_URL值为后台的url （你可以拷贝.env.development为.env.development.local，然后修改.env.development.local值，因为该文件优先级高于.env.development，且不会被git跟踪）

构建

运行npm run build命令构建项目：

npm run build

> vue-cli-service build
⠙  Building for production...

> ...

>  DONE  Build complete. The dist directory is ready to be deployed.
   INFO  Check out deployment instructions at https://cli.vuejs.org/guide/deployment.html
1
2
3
4
5
6
7
8
9

运行结束后在项目的目录下会生成dist文件夹，这就是我们项目构建的结果。

备注

直接打开dist/index.html文件是无法正常访问页面的。因为默认配置中，资源的访问路径是/根目录， 因此直接打开index.html会导致加载不到static资源文件。当你使用http服务的时候就不会有这个问题。

当你想在本地直接打开网页的时候，你可以修改vue.config.js中的publicPath为'./'来解决这个问题（或者直接修改.env配置文件的环境变量VUE_APP_BASE_PATH=./）。

注意：Vue Router的history模式不支持系统路径被配置为相对路径，只有hash模式才可以。（publicpath说明）

部署

  1. 拷贝根目录下的dist目录到服务器的/your/dist/path/目录；
  2. 使用apache2或nginx代理访问静态资源文件。以nginx为例：
server{
    listen 80;
    server_name www.example.com;
    location / {
        alias /your/dist/path/;
    }

    location /api/ {
        rewrite  ^/api/(.*)$ /$1 break;
        # api请求代理到实际后台接口
        proxy_pass   ${BACK_END_URL};
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13

备注

如果你使用了Vue Router的history模式，还需要把所有的uri重定向到index.html页面 （单页面应用固有问题，访问非index.html页面是找不到资源的。Uri路径形如a/b/c.html，需要重定向至index.hml页面，使用index.html自身的路由去解析加载。）














 
 
 
 


server{
    listen 80;
    server_name www.example.com;
    location / {
        alias /your/dist/path/;
    }

    location /api/ {
        rewrite  ^/api/(.*)$ /$1 break;
        # api请求代理到实际后台接口
        proxy_pass   ${BACK_END_URL};
    }

    location / {
        # uri重定向至index.html
        try_files $uri $uri/ index.html;
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

发布

如果你经常需要将代码发布到仓库中，可能你不想重复执行发布命令，如：

git add .
git commit
git pull
git push origin master
1
2
3
4

你可以创建script/release.sh脚本，将重复的发布命令写在里面。然后在package.json中， 添加scripts.release: "bash script/release.sh"。之后你就可以直接执行npm run release来发布了。

← 状态管理 →