原理:vue打包编译后的文件就是一套纯静态页面,在本地能直接访问index.html,放到服务器任意目录也能直接访问,通过Nginx反向代理用域名指向服务器的index.html就可以正常访问了。
1. vue本地打包编译生成dist文件夹
2. 上传到服务器任意目录(例如:/home/dist)
3. Nginx配置文件,下面是贴出一个的简单例子
server
{
listen 80; # 监听的端口 http是80,https是443
server_name www.xxx.com; # 你的域名
<span ># 页面访问路径</span>
location <span class="token operator">/</span> <span >{<!-- --></span>
root <span class="token operator">/</span>home<span class="token operator">/</span>dist<span >;</span> <span ># 指向index.html的目录</span>
try_files <span class="token variable">$uri</span> <span class="token variable">$uri</span><span class="token operator">/</span> <span class="token operator">/</span>index<span >.</span>html<span >;</span> <span ># 解决刷新报404的问题</span>
index index<span >.</span>html index<span >.</span>htm<span >;</span> <span ># 文件</span>
<span >}</span>
<span ># 接口访问路径</span>
location <span class="token operator">/</span>prod<span class="token operator">-</span>api<span class="token operator">/</span> <span >{<!-- --></span> <span ># 解决跨域问题,区分接口调用路径,注意一定要加/</span>
proxy_pass http:<span class="token operator">/</span><span class="token operator">/</span>api<span >.</span>xxx<span >.</span>com<span class="token operator">/</span><span >;</span> <span ># 你的接口域名</span>
<span >}</span>
<span >}</span>