Vue项目如何部署...以及自己遇到的坑...

看这篇文章之前, 首先确认你的技术栈

webpack, vue-cli, vue-router …也就是全家桶
router 里面启用的是 ‘history’-------- 只为了不让路径上出现丑陋的 “#” 标识

文件打包

静态文件打包 npm run build
会在项目文件里, 生成dist文件;
问题来了
1. 生成好了dist 文件后楼主就急急忙忙的再浏览器打开了里面 index.html
  然后就全屏白的, 打开 F12 一看
  
  很明显路径不对;
  于是楼主百度; 很多人都说要改config文件里面的 index.js文件下
  build配置assetsPublicPath: ‘/’, 改成assetsPublicPath: ‘./’ 相对路径,
  还有 png-loader 里面设置 publicPath:’…/…/’ 相对路径
  这里有个大BUG 楼主待会告诉
  一切都改好了, 重新npm run bulid;
  一打开index.html 感觉不错一切正常;
  问题2又来了
  页面就是login页面, 点击登录,页面不跳转, 啥B反应都没; F12页没异常;
  于是又是一番百度,官网; 提示是 router使用了 history 模式导致的;
  如果使用history 就必须使用后端代理; 不使用的话就必须带上丑陋的""#"" 路由
  解决办法:
  1. 去官网下载 niginx 解压到本地; ----因为楼主是windows系统
  2. 双击niginx.exe; 打开localhost:80 出现可爱的404… 日;肯定是端口被占;
  3. 修改config文件下面的nginx.conf文件, 修改端口8070;
    保存; 再点击; 可用!
  4. 再修改nginx.conf文件如下
    
    问题3又来了
    保存 ,点击启动 niginx; 再打开mattazhang.8070 呵呵没反应
    当时立马反应过来是要修改hosts 文件;
    于是找到C:\Windows\System32\drivers 地下的host文件修改配置;
    然后楼主win10没有权限修改, 又百度了下(网上一大堆) 终于修改成功
    
    然后楼主就兴高采烈的刷新页面OK! 可以用了, 也登录成功进入了首页面;
    看似一切顺利;
    但是刚刚说了有个相对路径大BUG;
    问题4这里就体现出来了;
    于是楼主欢快的各种点啊点啊, 发现二级路由进不去, F12 里面一堆BUG
    就是这种 loading chunk XXX failed;
    
    明显文件找不到;
    呵呵! 于是楼主又把刚刚项目里面的config–index.js文件里面的 build对象下面
    assetsPublicPath: ‘./’, 改成 assetsPublicPath: ‘/’, 使用绝对路径;
    然后又是npm run build 然后不用重启nginx,直接刷新 mattazhang.com;
    一切都舒服了~
    !!!呵呵~ 这只是内网部署,想部署外网,得有外网服务器~
    下一篇文章楼主准备更新阿里云服务器部署改静态文件项目,
    再下一篇准备 github部署下~

Vue项目如何部署...以及自己遇到的坑...

看这篇文章之前, 首先确认你的技术栈

文件打包

相关推荐