一、环境变量

所有测试环境或者正式环境变量的配置都在.env-xxx 的相关文件之下
它们都会通过 vue-cli插件注入到全局

1.1、配置后端的请求ip

你只要在你的代码中直接使用即可访问你配置的环境变量,如:

// 这样即可获取配置在api 的 baseURL 了
const baseURL = process.env.VUE_APP_BASE_API

1.2、发布项目部署目录(不是根目录)【必看】

对于发布来讲,只需要将最终生成的静态文件,也就是通常情况下 dist 文件夹的静态文件发布到你的 cdn 或者静态服务器即可,需要注意的是其中的 index.html通常会是你后台服务的入口页面,在确定了 js 和 css 的静态之后可能需要改变页面的引入路径。部署是可能会发现资源路径不对 ,只需修改.env.xxxx文件资源路径即可。

#基础路径 注意:发布之前如果不是根目录需先修改这里,并开启。默认是'/'(根目录)
VUE_APP_PUBLIC_PATH  = '/'

比如你部署的“地址”在别的路径如:http://192.168.3.205:8000/ibps/

特别注意:如果你部署的不是根目录,比如:ibps 则要修改为/ibps/
一定要注意要前后都有“/

(这步一定要打包前设置好)

二、npm打包

当项目开发完毕,只需要运行一行命令就可以打包你的应用:

打包前提前检查.env.productionVUE_APP_BASE_API是否是生产环境的后端API路径.

//.env.production
VUE_APP_BASE_API = 'http://cloud.bpmhome.cn:15100/ibps

如果部署的路径不是根目录,参考上一节

如果你没有安装依赖需要

  npm install

执行打包命令

# 执行打包命令 build:prod缩写
npm run build

# 打包正式环境
npm run build:prod

# 打包测试环境
npm run build:sit

2.1、打包过程

webpack会生成相应的目录结构(压缩和混淆的代码)

2.2、 打包产物

产出一个index.html、favicon.ico、js、images等文件,没有红色的东西,证明打包成功

三、前端路由模式(前端路由与服务端的结合)

IBPS平台 中,前端路由使用的是 vue-router,所以你可以选择两种方式:browserHistoryhashHistory
两者的区别简单来说是对路由方式的处理不一样,hashHistory 是以 # 后面的路径进行处理,通过 HTML 5 History 进行前端路由管理,而 browserHistory 则是类似我们通常的页面访问路径,并没有 #,但要通过服务端的配置,能够访问指定的 url 都定向到当前页面,从而能够进行前端的路由管理。
IBPS平台中默认使用的是 hashHistory ,所以如果你的 url 里有 #,想去掉的话,需要切换为 browserHistory。 修改 /public/config.js 中的 VUE_ROUTER_MODE 即可


    // 路由模式: hashhistory
    VUE_ROUTER_MODE:'history',  //设置为 history

如果你使用的是静态站点,那么使用browserHistory 可能会无法访问你的应用,因为假设你访问http://localhost:9999/dashboard, 那么其实你的静态服务器并没有能够映射的文件,而使用 hashHistory 则不会有这个问题,因为它的页面路径是以 #开始的,所有访问都在前端完成,如:http://localhost:9999/#/dashboard/

3.1 History模式

不过如果你有对应的后台服务器,那么我们推荐采用 browserHistory,只需要在服务端做一个映射,比如:

3.1.1 Apache

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /index.html [L]
</IfModule>

3.1.2 nginx

location / {
  try_files $uri $uri/ /index.html;
}

更多配置请查看 vue-router 文档

文档更新时间: 2022-10-17 16:59   作者:hugh