前言
来啦老铁！
笔者近期在团队开发个小工具，后端语言python，对应框架为flask，前端框架vue，笔者对vue的使用有一定的经验，并有对应的文章记录：
在本地开发毫无压力，想当然部署到远程linux(ubuntu系统)时应该也是相同的思路，应该很简单才对，没想到遇到问题了，苦思冥想让本就发量不多的脑袋，雪上加霜，嗯，是时候记一下血泪史了~
主要问题
- vue @别名不生效问题；
- 前端host配置问题；
- 后端host配置问题；
1. vue @别名不生效问题；
由于我前端是用@vue/cli脚手架搭建的，本地调试时使用默认设置好的命令：
npm start
这个命令好呀，本地会把前端启动好，并且是有热部署功能的，即代码一有改动，马上自动部署前端生效，提高编码效率；
到ubuntu上，我简单想用相同的命令运行前端，却报了这样的错误：
@别名不生效
很明显，项目中的 “@” 别名没生效，先介绍一下这个@别名：
在@vue/cli创建的项目中，build目录下的webpack.base.conf.js有个resolve配置项，可以配置别名，如：
resolve: {
extensions: ['.js', '.vue', '.json'],
alias: {
'vue$': 'vue/dist/vue.esm.js',
'@': resolve('src')
}
}
而resolve方法在webpack.base.conf.js的代码是：
function resolve(dir) {
return path.join(__dirname, '..', dir)
}
简单的说就是，@相当于../src，更具体点的例子是，在没有这个别名前，假如src/views/login.vue要引用src/api/login.js文件中的login()方法，那么引用的代码应该为：
import login from "../../api/login"
有点长对不对，而且容易写错路径，而vue脚手架项目中引进了别名这个功能，'@': resolve('src')应用了之后，我们引用login()方法就可以简化为：
import login from "@/api/login"
-
解决过程1
首先怀疑nodejs版本有差异导致相同命令，结果不同，确实ubuntu上的的版本为12.x，而我本地mac为10.x版本，把我高兴坏了，立马解决，然后重新npm start，结果。。。不出意外，没那么顺利，还是没解决；
-
解决过程2
考虑将代码打包，然后通过类似serve模块来启动前端，于是在前端代码根目录执行：
npm run build
然后安装serve模块：
npm install -g serve
最后执行：
serve -s dist -p 9528
访问浏览器，前端竟然可以访问了，可把我高兴坏了，结果仔细一用自己开发的功能，竟然前端的请求都显示200状态码，但却没有任何返回，后端也显示没有接到任何请求，这在我本地mac和远程ubuntu都一个现象，梳理了各项可能的配置问题，没有任何发现，笔者在此处吐血了~
-
解决过程3
那天晚上，接近2点才停下调查的脚步，过了一个晚上，在地铁上冒出了个想法，是不是用yarn来操作看看，也许好了~
没想到呀，真让yarn给解决了，具体命令：
先安装依赖：
yarn install
然后启动前端：
yarn start
最后ubuntu上的浏览器访问127.0.0.1:9528/#/，一切正常~
当然，为了使终端退出后，程序仍运行，我使用了nohup，即：
nohup yarn start >/dev/null 2>&1 &
2. 前端host配置问题；
到此，终于有了突破性的进展，不过在本地浏览器访问远程ubuntu的ip+端口时，无法访问：
无法访问.jpg
-
解决过程1
首先我怀疑端口没有开放，于是开放了端口：
sudo ufw allow 9528
然后重新加载防火墙规则：
sudo ufw reload
也可以直接关闭防火墙：
sudo ufw disable
验证防火墙状态：
sudo ufw status
不过做完后，仍然无法被访问，当然，开放端口或关闭防火墙这一步是肯定要做的，所以肯定还有其他问题没解决！！！
此处再一口老血喷出~~~
-
解决过程2
既然端口没问题，那么有可能ip有问题喽，于是找到config下的index.js文件，里头的host配置写着："localhost"：
localhost.jpg
经了解，像"localhost"或者"127.0.0.1"这种host配置，只能本机访问的，要被外来访问，我们参考该字段的提示，改为：
host: process.env.HOST
懂点js或nodejs的同学都知道，这个是取环境变量中的HOST变量值，于是使用命令重新启动前端：
export HOST=XXX.XX.X.XXX && nohup yarn start >/dev/null 2>&1 &
然！！！后！！！，所有问题迎刃而解啦！！！
3. 后端host配置问题；
增加记录一个经验点。
之前后端在启动后，也无法被其他机器访问，除了使用flask_cors模块的CORS决绝完跨域问题，还有一个关键点，那就是要改一下host，这个跟前端是一样一样的，比如无法被其他机器访问的host：
错误host.jpg
正确的姿势是可以把127.0.0.1改为0.0.0.0，或者该服务所在机器的真实ip，当然0.0.0.0方式更优，你品品。
正确host.jpg
嗯，喷完血，感觉好多了~
以上为近期遇到的部署问题和解决方案，仅侧重于解决问题，部分未深究其根源，咱们开卷有益，欢迎提供更优方案，感谢~
如果本文对您有帮助，麻烦动动手指点点赞？
谢谢！
网友评论