使用vue cli开发项目中遇到的坑

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了使用vue cli开发项目中遇到的坑相关的知识,希望对你有一定的参考价值。

一、部署文件

使用vue cli 开发项目,执行npm run build命令生成dist静态文件,将dist文件包放到服务器中即可。

刚接触webpack,不知道怎么部署前端文件,原以为需要将app文件上传,在 inux上安装node,以及npm install 一系列的包,捣鼓了很久,发现只需要执行 npm run build 将源码打包成一个静态文        文件即可,上传静态文件dist,将 controller指向index.html

二、跨域问题

实行前后端分离,使用vue init 要安装 webpack版本,避免安装webpack-simple,webpack版本自带跨域处理,在config文件夹下index.js文件中增加配置:
proxyTable: {
  ‘/api‘: {
    target: ‘http://116.62.180.238:8081/‘,
    changeOrigin: true,
    pathRewrite: {
      ‘^/api‘: ‘‘
    }
  }
}
另:部署到服务器中,nginx也需要写转换api的代码

 

以上是关于使用vue cli开发项目中遇到的坑的主要内容,如果未能解决你的问题,请参考以下文章

Vue项目开发过程中遇到的坑

Vue.js学习—— vue-cli初始化项目的坑终极解决办法和总结(离线安装webpack下载模板)

记录app webview内嵌vue单页应用所遇到的坑

微信小程序开发中遇到的坑及解决办法

记录在一次前后端分离的项目开发中遇到的坑

vue项目使用微信公众号支付总结及遇到的坑