这篇文章主要是在说两个内容:
1. 如果编译后的vue不能通过 location / 来访问,必须通过 location /xxx 或者 location /xxx/xxx 这种方式访问,该如何配置vue和nginx。
2. 如何解决nginx配置完vue后,除了首页内容,其他页面点击浏览器刷新操作会出现空白页面。
对于如何使用nginx作为服务器访问编译好的vue.js网上应该能找到一大堆,但是大部分都是C-C、C-V作品,略微浪费时间。本来我也打算从官网 (https://vuejs.org )C-C一个小例子出来,无奈找了10来分钟硬是没找到。有兴趣可以去试下看能不能再10分钟之内找到如何与nginx搭配使用。官方文档地址:https://cn.vuejs.org/v2/guide/installation.html
这个真是有点嘲讽了。。。。
既然官方故意搞个这么难找,那没办法我们只有自己造轮子了。
首先要明确的是,我们一般使用vue-cli构建vue项目。vue-cli不是本文重点,自行了解。
在我们写完vue.js代码之后,会将代码编译。一般执行如下命令:
npm run build (如果使用yarn另说,本文以npm为例)
编译完成后会在项目根目录(src所在的目录就是根目录)生成一个dist文件(前提是你不对webpack编译做改动)
dist文件中会生成一个index.html和static文件,static文件中存放的是js和css。我们使用nginx进行访问的也就是dist文件中的内容。</