vue脚手架创建项目-前后分离

飞一样的编程

擅长邻域：Java,MySQL,Linux,nginx,springboot,mongodb,微信小程序,vue

分类： vue 专栏： vue学习标签：前后分离

2023-11-29 15:41:29 424浏览

前后端分离

环境准备

node这边建议不要急着安装，先安装nvm，用nvm安装node才是最合理的，nvm可以很方便的安装多个版本的node,并可以很方便的来回切换不同版本。

nvm安装node

nvm是node的包管理工具

这个安装很简单，完全是傻瓜式安装。

特别注意

nvm use版本切换版本的时候无法选中版本，前面没法带*号，

这个问题是你安装nvm的时候路径选择错误

nvm的安装目录选择非c盘后，他还会让你选一个nvm的node工作区，这个目录也要选其他盘哦

常用命令

nvm ls

nvm install 12.18.3

nvm uninstall 12.18.3

nvm use 12.18.3

node -v

npm -v

配置淘宝镜像

npm config set registry https://registry.npm.taobao.org

查看是否配置成功

npm config get registry

安装vue-cli

安装最新版本: npm install -g @vue/cli

安装指定版本: npm install -g @vue/cli@4.4.1

测试是否安装成功：vue --version或者vue -V

创建vue项目

在你想创建项目的目录下cmd命令框打开，输入vue ui回车，然后再图形化界面操作即可

vscode开发vue项目

必备的插件

Vetur

vue-helper

安装elementUI

可以直接在vue ui的界面安装也行

npm i element-ui -S

安装axios

可以直接在vue ui的界面安装也行

npm install axios

使用axios

import axios from 'axios'
mounted () {
  axios({
    method: 'get',
    url: 'list'
  }).then(resp => {

配置后台请求地址

新建.env.development

注意：VUE_APP_BASE_API自定义变量的时候必须是VUE_APP开头，另外就是=前后的空格也要注意

# 开发环境配置
ENV = 'development'
VUE_APP_BASE_API = '/dev-api'

新建.env.production

# 生产环境配置
ENV = 'production'
VUE_APP_BASE_API = '/prod-api'

如何使用：

baseURL: process.env.VUE_APP_BASE_API

解决跨域问题

后端解决

//@CrossOrigin//解决跨域问题
public class BrandController {

前端解决

后端接口开发完成后，开发时需要通过代理服务器路由到后端，不再使用mock，所以配置如下，在根目录（跟package.json同级）添加vue.config.js配置代理服务器，将/dev-api开头的请求代理到后端服务器http://localhost:7001

module.exports = {
  devServer:{
    host:'localhost',
    port:8088, //前端项目端口号
    open: true,
    proxy:{
      [process.env.VUE_APP_BASE_API]: {
        target: `http://localhost:8080`, //后端项目地址
        changeOrigin: true,
        pathRewrite: {['^' + process.env.VUE_APP_BASE_API]: ''}
      }
    }
  }
}

表示如果通过axios请求后端/user/add的接口，axios会自动加上前缀/dev-api，变成/dev-api/user/add，代理服务器拦截所有/dev-api开头的请求，去掉/dev-api,自动转发到http://localhost:7001/user/add；这样就可以区分静态请求和动态请求了(根据.env配置文件获取前缀)
如果ssm项目未部署在tomcat根目录，则配置target:http://localhost:tomcat端口号/项目名字