项目部署
使用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