前后端分离项目部署 vue+mysql+flask_vue+flask+mysql项目代码

打包vue项目

<code class="language-plaintext hljs">npm run build</code>

注意：

静态文件的路径配置

最笨方法：（找了很多网上的配置路径方法，都没解决）

先打包一遍，运行之后，找请求不到的静态文件请求路径是什么，再去本地项目中改，再次打包

缺点：

上线和本地不能同时满足

跨域

跨域最好让后端来做，这样打包之后不会出现各种各样的问题

比如，python后端

两行代码就解决了。

前端只需正常请求接口就可以了。

本地测试运行

1. 安装服务器

<code class="language-plaintext hljs">npm i -g serve</code>

1. 进入打包好的dist文件夹

<code class="language-plaintext hljs">cd dist</code>

1. 运行

<code class="language-plaintext hljs">serve</code>

项目配置的都没问题的话，这里就可以请求成功。

服务器安装nginx

nginx为反向代理，如果只是内网自己访问不需要配置nginx，可跳过此步。

查看是否有nginx

<code class="language-plaintext hljs">whereis nginx</code>

安装nginx

<code class="language-plaintext hljs">npm install -y nginx</code>

查看版本号

<code class="language-plaintext hljs">nginx -v </code>

表示安装成功

启动nginx

<code class="language-plaintext hljs">nginx</code>

访问服务器

以下界面即为启动成功

这里访问默认的是80端口，nginx服务器默认的是80端口，如果不能访问，大致有几种原因：

端口进程被占用

nginx未启动

nginx配置错误

服务器安全组未加入80端口

其中，端口进程被占用，如下：

查看当前进程

<code class="language-plaintext hljs">netstat -ntlp
或者
netstat -tunlp</code>

杀掉进程

<code class="language-plaintext hljs">kill 52161</code>

再次查看进程 如果80端口依然被占用 接着kill 直到没有80端口进程

启动 nginx

启动成功，访问服务器

停止nginx服务