vuejs如何在服务器部署

---

title: vuejs如何在服务器部署

date: 2017-10-31 20:41:03

tags: [vue]

上传到网站服务器

Vue 是一个 javascript 的前端框架，它是运行在浏览器里的，对服务器本身没有任何要求，只要一个静态文件服务器能通过 http 访问到其资源文件就可以了！无论你是用 apache, ngnix 都是可以的。

npm run dev 命令行是用来在本地开发的时候做调试用的，通过 npm run build 把生成的 dist 文件夹（不要上传文件夹）里的内容上传到http服务器上就可以通过 http 来访问了，开发机上正常，上传以后程序出现错误不能运行，最大的可能性是你引用资源的路径有问题。

一般如果 Vue 框架的程序上传到网站服务器的根目录下是不会有问题的，也不存在资源文件引用错误的情况，但如果你不是上传到根目录，就会有问题，通过 vue-cli 生成的开发目录，build 以后默认引用资源文件的路径是

比如 app.js 的引用方式<script type="text/javascript" src="/static/js/app.js"></script>

所以，如果你的目录结构是如下：

	目录结构
	|——www/
	    |__hot/
	        |__static/
              |__index.html

当你通过

http://www.xxx.com/hot/index.html来访问的时候，会出现找不到 app.js 的问题。

因为 index.html 里引用的 app.js 路径是 http://www.xxx.com/static/js/app.js

但是 app.js 的实际路径是 http://www.xxx.com/hot/static/js/app.js，所以出现了404错误。

解决方法很简单，把引用方式改成下面两种方式都可以

<script type="text/javascript" src="./static/js/app.js"></script>

或者

<script type="text/javascript" src="/hot/static/js/app.js"></script>

推荐第二种方式，可以保证在 vue-router 生成的 url 下也不出现问题，当然这也不需要手动去改，

在webpack的配置文件中修改
assetsPublicPath: './'
或者
assetsPublicPath: '/hot/',

这样，我们就基本解决了服务器子目下运行的路径引用错误的问题了。

当然，如果你还用到了vue-router，要在 router 的配置中加上

export default new Router({
  mode: 'history',
  base: '/hot/', //加上这一行
}）

用浏览器打开http://www.xxx.com/hot/，一切运行正常，点击各种链接也能出来，但是由于我启用了 history 模式，我直接在浏览里访问 http://www.xxx.com/hot/item/1 这样的 url 是又出现404错误了，为什么我可以在首页通过点击进入 http://www.xxx.com/hot/item/1 这个页面，但是直接访问又不行呢？

因为在 history 模式下，只是动态的通过 js 操作 window.history 来改变浏览器地址栏里的路径，并没有发起 http 请求，但当你直接在浏览器里输入这个地址的时候就一定要先对服务器发起 http 请求，但是这个目标在服务器上又不存在所以就返回404了，怎么解决呢？就是把所有的请求全部转发到 http://www.xxx.com/hot/index.hmtl 上就可以了。具体如何操作请继续往下看。

HTML5 History 模式

vue-router 默认 hash 模式 —— 使用 URL 的 hash 来模拟一个完整的 URL，于是当 URL 改变时，页面不会重新加载。

如果不想要很丑的 hash，我们可以用路由的 history 模式，这种模式充分利用 history.pushState API 来完成 URL 跳转而无须重新加载页面。

const router = new VueRouter({
  mode: 'history',
  routes: [...]
})

当你使用 history 模式时，URL 就像正常的 url，例如 http://yoursite.com/user/id，也好看！

不过这种模式要玩好，还需要后台配置支持。因为我们的应用是个单页客户端应用，如果后台没有正确的配置，当用户在浏览器直接访问 http://oursite.com/user/id 就会返回 404错误，这就不好看了。

所以呢，你要在服务端增加一个覆盖所有情况的候选资源：如果 URL 匹配不到任何静态资源，则应该返回同一个index.html 页面，这个页面就是你 app 依赖的页面。

后端配置例子

Apache
<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /index.html [L]
</IfModule>

nginx
location / {
  try_files $uri $uri/ /index.html;
}

Node.js (Express)
https://github.com/bripkens/connect-history-api-fallback

警告

给个警告，这么做以后，你的服务器就不再返回 404 错误页面，因为对于所有路径都会返回 index.html 文件。为了避免这种情况，你应该在 Vue 应用里面覆盖所有的路由情况，然后再给出一个 404 错误页面。

const router = new VueRouter({
  mode: 'history',
  routes: [
    { path: '*', component: NotFoundComponent }
  ]
})

或者，如果你是用 Node.js 作后台，可以使用服务端的路由来匹配 URL，当没有匹配到路由的时候返回 404，从而实现 fallback。

开启apache的url rewrite模块

我用的是 Apache 做 web 服务器的虚拟空间，以下是开启后台配置支持的方法。

1、开启 apache 的 url_rewrite 模块，也就是在 httpd.conf 配置文件中去掉下面这句话的注释 LoadModule rewrite_module modules/mod_rewrite.so

2、还是在 httpd.conf 配置文件中，找到 AllowOverride，把 AllowOverride None 修改成 AllowOverride all （这个至观重要，不做这个设置的话就算做了其它操作，也是无效的）

<Directory />
    Options FollowSymLinks
    AllowOverride All
    Order deny,allow
    Deny from all
</Directory>

3、在所需要进行 rewrite 的 web 的主目录下添加文件名为 .htaccess 的文件，文件里的代码如下：（.htaccess 下写的是个人的重写规则）

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  RewriteRule ^dist$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /dist [L]
</IfModule>

注意：步骤2是很重要，这个配置的含义就是让 apache 去读取对应的配置文件，.htaccess 属于配置文件之一，如果设置成为了 None 就不让读取了，肯定就不行了。

参考网址：

• https://router.vuejs.org/zh-cn/essentials/history-mode.html
• https://www.zhihu.com/question/46630687/answer/157166318