vue项目配置

项目构建

最终项目完成后，我们可以去构建（build）我们的项目npm run build

问题

1.接口问题
2.目录路径问题

接口问题

开发环境的接口和生产环境的接口不是同一个

//可以通过axios的baseURL来解决这个问题
axios.default.baseURL=process.env.NODE_ENV==='development'?
'开发环境接口':'生产环境接口'

//如果配置了跨域
axios.default.baseURL=process.env.NODE_ENV==='development'?
'http://localhost:8080/后缀':'生产环境接口'

前后端分离用vue-cli开发一定会产生跨域问题

//配置vue.config.js下的devServer.proxy
module.export={
  devServer:{
      proxy:'需要代理的地址'//开发环境的接口地址URL
  }
}

目录路径问题

目录路径是最终build后的项目引入路径，默认是‘/js/xxx.js’ 'css/xxx.css'

1.部署的内容直接在服务器根目录

不需要修改

2.部署的内容在某个文件夹下的如：demo

module.export={
  publicPath:'/demo'      //  demo/js/xxx.js
}

3.一劳永逸的方法

module.export={
  publicPath:'./'      //  demo/js/xxx.js
}

4.如果配置后不想改变开发环境

module.export={
  publicPath:process.env.NODE_ENV==='development'?'/':'./'
}

打包完成后

打包完成后就可以把项目交给后台部署，部署到统一域下（如果后台已经配置了cors跨域资源共享，我们只需要部署到任意web服务器下即可）