vue项目部署

项目部署

使用vue开发的项目，最终还是HTML CSS JavaScript

构建项目

npm run build

使用该命令可以构建我们的项目，会生成一个dist文件夹，文件夹中就是构建完成的项目

部署项目

nginx

进入到nginx的conf/nginx.conf，修改该文件的配置，添加新的虚拟主机。

server {
  listen       8000;  # 监听端口
  server_name  localhost; # host地址

  location / {
    root   www/admin; # 项目根目录
    index  index.html index.htm;  # 项目首页 ----不是history模式
    <!-- try_files $uri $uri/ /index.html; 如果使用了history，配置该信息即可(替换上面一行的代码) -->
  }

}

移动项目

把项目放置在服务器设置的根目录中（www/admin）

部署完成

注意事项

公共接口地址

我们可以根据vue-cli中提供的.env操作在不同的环境中配置不同的公共地址

.env 所有的环境都会优先去找.env
.env.local 该文件不会被上传到版本控制

• vue-cli-service serve 表示是开发环境（development）
  .env.developtment
• vue-cli-service build 表示生成环境（production）
  .env.production
• vue-cli-service serve/build --mode 自定义环境名字
  .env.自定义环境名字

VUE_APP_BASEURL=http://xxx.com
eg: VUE_APP_A=xxx  使用 # process.env.VUE_APP_A

想要使用对应变量，则在代码中使用process.env.VUE_APP_BASEURL