Vue应用部署到服务器的正确方式

许多时辰我们发明辛辛勤苦写的VueJs应用颠末打包后在本身当地搭建的处事器上测试没有什么题目，但真正放在处事器上后，会发明或多或少的题目，好比：页面呈现空缺征象，获取资源路径差池等，我信托以VueJs为技能栈来举办前端开拓的小搭档或多或少城市碰着这样的题目，我也碰着过，那此刻我们就来逐一办理这样的题目。

怎样打包

• 基于Vue-Cli,通过npm run build来举办打包的操纵

怎样陈设

• 将打包出来的资源，基于Vue-Cli的一样平常是dist目次下有static目次和index.html文件，可以直接将这两个文件扔随处事端
• 但偶然辰，我们会直接将dist文件扔随处事端

呈现的题目

• 打包随处事器后，呈现资源引用路径的题目
• 打包随处事器后，呈现空缺页的题目
• 打包随处事器后，呈现引入的css的type被拦截转换为"text/plain"题目
• 打包随处事器后，呈现路由革新404的题目

呈现资源引用路径的办理方案

一样平常这个题目是因为在webpack设置打包宣布的目次造成的。

• 环境一.假如是将static与index.html直接放在处事器根目次,也就是说，当前的应用会见的网址如:http://www.abc.com
• 办理步伐：

设置输出的publiPath:"/"可能"./" 

• 环境二.直接将打包后的dist文件放在了处事器的根目次，也就是假如必要会见当前的应用，会见的网址如:http://www.abc.com/dist
• 办理步伐：
• 起首必要在建设路由实例中增进：

const router = new VueRouter({ 
 
mode: 'history', 
 
base: '/mobile/', 
 
scorllBehavior: () => ({ 
 
y: 0 
 
}), 
 
routes 
 
}); 

然后再打包宣布目次:

publiPath:"/dist/"可能"http://www.abc.com/dist/" 

呈现因为路由的history模式下革新当前路由呈现404的题目

本日做的应用宣布随处事器上，发明当革新当前路由的时辰，就会呈现404的状况，其拭魅这是

由于当革新当前页面时辰，所必要会见的资源在处事器上找不到，也就是说，我们在VueJs开拓应用的进程中，配置路由的路径不是真实存在的路径，而且行使了history模式。

• 办理步伐

必要后端举办共同,参考https://router.vuejs.org/en/essentials/history-mode.html

呈现引入的css的type被拦截转换为"text/plain"题目

这是我开拓进程中碰着的感受很奇葩的题目，我们都知道，一样平常基于Vue-Cli，通过WebPack打包后的资源不必要变动什么。然则我发明，当我把代码举办上传后，输入网址，望见的页面把我吓坏了，发明全部样式不存在了，第一回响就是以为是本身在举办打包设置进程中呈现了什么题目，然后通过fillder举办调试，发明css文件是正确获取到的

可以看到，这个css文件的type被拦截转换为"text/plain"，这时辰，我又把相干的设置文件看了两遍，后头发明，真的是日了狗了，让我哭一会儿。先上图

我擦，原本是处事器端返回的范例居然是"text/plain"。这个题目很好办理，把这图直接给后端，是不是感受被坑了/(ㄒoㄒ)/~~。

（编辑：河北网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!