Vue系列 - 从创建vue到项目打包发布全过程总结

25 篇文章 0 订阅
16 篇文章 0 订阅

1 创建vue 项目

1.1 安装基本环境

1.安装node.js ,这里可自行查询官网

2.vue3.0 安装

   npm install -g @vue/cli

1.2 vue3.0创建项目

   vue create my-project
   cd my-project
   npm run serve 

  # 1.Manually select features
  # 2.选择Router,Vuex,CSS Pre-processors,Linter / Formatter
  # 3.css选择SCSS/SASS
  # 4.Linter / Formatter选择prettier
  # 5.In dedicated config files

安装成功后:
在这里插入图片描述

1.3 安装插件方法

  • 安装element - ui
npm i element-ui -S
  • 安装axios ,可以采用与面一样的命令,也可以采用下面的这种!
npm install --save axios

安装完成后会在package.json中显示版本信息
在这里插入图片描述
一般项目打包,不会打包插件文件夹node_models。
要重新下载这些包需要

npm install

其他相关命令按照src目录下的READ.md上的内容执行

# my-project

## Project setup 下载插件
npm install


### Compiles and hot-reloads for development
npm run serve

### Compiles and minifies for production

npm run build


### Lints and fixes files

npm run lint


### Customize configuration
See [Configuration Reference](https://cli.vuejs.org/config/).

2 打包vue项目

执行下列命令

执行npm run build

会生成dist目录
在这里插入图片描述

2.1 直接集成到springboot中

vue项目中首先配置vue.config.js到Vue根目录下(与package.json同级目录)

module.exports = {
   publicPath: process.env.NODE_ENV === 'production'
     ? '/'    //相对目录设置为了保证css,js等文件都访问到
     : '/'
 }

vue项目打包:

npm run build

打包后,引入标签变成了这样:

<link href="/js/about.56c634c6.js"
<link href="/css/app.c08de4ec.css" rel="stylesheet">

生成dist目录。将dist目录中的内容拷贝到springboot项目中的static目录下与templates目录下:
在这里插入图片描述
注意,通常springboot项目不能直接访问templates目录,需要通过thmyeleaf访问

  1. 引入thymeleaf依赖
<!--引入thmyeleaf 便于访问templates中的html-->
 <dependency>
     <groupId>org.springframework.boot</groupId>
     <artifactId>spring-boot-starter-thymeleaf</artifactId>
 </dependency>
  1. 配置application.yml
server:
  port: 8080

spring:
  resources:
    static-locations: classpath:/META-INF/resources/,classpath:/resources/static/,classpath:/static/,classpath:/public

  thymeleaf:
    prefix:
      classpath: /templates   # 访问template下的html文件需要配置模板,映射
    cache: false # 开发时关闭缓存,不然没法看到实时页面
    
  1. controller层
@Controller
public class IndexController {

    @GetMapping({"/","/login"})
    public String index(){
        return "index";
    }

}

即可通过开启springboot应用访问
在这里插入图片描述

3 vue单独发布到tomcat

首先应配置vue.config.js到Vue根目录下(与package.json同级目录)

module.exports = {
		//在vue-cli.3.3版本后 baseUrl被废除了,因此这边要写成 publicPath
   publicPath: process.env.NODE_ENV === 'production'   
     ? '/VueTest/'     //这里是tomcat下项目目录的名子,为了使发布时js,css等静态文件地址都找到
     : '/'
 }

然后vue项目运行打包

npm run build

生成dist目录。打开dist目录下的index.html
在这里插入图片描述
可以看到所有的静态文件地址都自动配置了"/VueTest/",这样发布时可以链接到。

在tomcat的webapps目录下新建VueTest,将dist目录中的内容复制进去
在这里插入图片描述
启动tomcat(bin/startup.bat)
成功访问
在这里插入图片描述

4 关于跨域问题

4.1 如果vue打包集成到springboot中

其实不用专门设置跨域,因为已经集到springboot中,只有一个端口

4.2 如果vue单独发布到tomcat中,需要解决跨域问题

这里是一个页面应用axios跨域的例子:

<template>
  <div class="about">
    <h1>This is an about page</h1>
    <input v-model="rs" type="text">
    <button @click="searchKey" type="submit" id="searchbtn">上传消息</button>
  </div>
</template>

<script>
import axios from 'axios'
//定义axios访问地址
axios.defaults.baseURL = 'http://localhost:8989/' 
export default {
  data(){
    return{
      rs:''
    }
  },
  methods:{
     searchKey(){
        var rs=this.rs;
        console.log(rs);
        //对接后端接口
        axios.get('/abc').then(res=>{
            console.log(res);
            this.results=res.data;
        })
    }
  }
  
}
</script>

springboot中解决跨域问题:

@Controller
public class IndexController {

    @GetMapping({"/","/login"})
    public String index(){
        return "index";
    }


    @GetMapping("/abc")
    @CrossOrigin      //该方法允许跨域
    @ResponseBody
    public Object abc(){
        return "123";
    }

}

直接采用SpringBoot的注解@CrossOrigin,Controller层在需要跨域的类或者方法上加上该注解即可。
其他花式方法见:https://blog.csdn.net/qq_43486273/article/details/83272500

5 小结

vue和springboot前后端分离开发,打包部署还有一些注意的点,后续还会做笔记!这里先把总体流程做一个总结。如果帮助到你,请记得给我点赞,谢谢!大家共同进步!

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值