vuecli3项目打包部署的步骤如下:
- 修改 vue.config.js的配置文件
- 使用 npm build 或其它命令打包
- 搭建nginx服务器
- 配置nginx.conf文件
- 把打包的项目放到nginx指定目录
- 运行nginx,浏览器输入地址访问项目
下面介绍vue.config.js配置文件的写法:
vuecli3项目结构一般都有 两个文件,这两个文件分别是开发环境配置和生产环境配置,并且这两个文件中的配置是全局变量,可以被整个项目获得使用。
第一条红线是配置目前是生产环境;第二条红线配置基础的url,提供反向代理使用
重点看框住的部分 "/dev-api" 是配置的全局变量,即当请求地址中存在 "/dev-api" 时,请求会通过 proxy 代理转发到服务器。
下面介绍nginx中的nginx.conf中的写法:
标记 1 是nginx的访问端口为 80 端口。
标记2 是vuecli3项目打包后存放的地址。
重点标记3 是配置vuecli3前端项目访问服务端反向代理以及跨域,这个配置非常重要,其中proxy_pass 是后台程序所在服务器地址。