vue怎么配置在spring中 • Worktile社区

worktile

Worktile官方账号

将Vue.js和Spring框架结合起来可以实现前后端分离的开发模式。下面是配置Vue.js在Spring中的步骤：

创建Spring项目：首先，使用Spring的工具（如Spring Initializr）创建一个基本的Spring项目。
配置Vue.js的环境：在项目的静态资源目录中（通常是src/main/resources/static），创建一个新的文件夹，命名为"vue"（或其他合适的名称），然后将Vue.js的相关文件（包括Vue.js、vue-router.js等）下载并放置在该文件夹下。
创建Vue组件：在"vue"文件夹下创建一个新的文件夹，命名为"components"，用于存放Vue组件。在该文件夹中创建一个Vue组件，可以给它取一个合适的名称（如HelloWorld.vue），并编写组件的代码。
配置Webpack：为了进行Vue.js的开发，需要使用Webpack来进行模块打包。在项目的根目录下创建一个新的文件，命名为"webpack.config.js"，并编写配置文件的代码。
配置Spring的路由：在Spring的配置文件中（通常是application.properties或application.yml），添加以下配置来解决后台路由冲突问题：

spring.mvc.view.prefix=/WEB-INF/views/
spring.mvc.view.suffix=.html
spring.mvc.static-path-pattern=/static/**

编写Spring控制器：创建一个Spring的控制器类，在其中添加一个方法，用于返回Vue.js的入口HTML文件。可以使用Thymeleaf等模板引擎来渲染HTML页面。
启动应用程序：启动Spring应用程序，验证配置是否正确。可以通过访问http://localhost:8080（根据实际端口号调整）来查看Vue.js页面。

通过以上步骤，就可以将Vue.js成功配置在Spring中。可以根据实际需求进一步进行开发，如引入axios实现前后端数据交互，使用Vuex进行状态管理等。这样就可以实现一个前后端分离的Web应用程序。

1年前 0条评论

fiy

Worktile&PingCode市场小伙伴

配置Vue.js在Spring中需要进行以下步骤：

创建一个Spring项目：首先，需要创建一个Spring项目作为后端服务。可以使用Spring Boot来快速搭建一个基础的Spring项目。
设置静态资源文件夹：在Spring项目的配置文件中，添加以下配置，将Vue的构建资源作为静态文件访问：
```
spring:
  resources:
    static-locations: classpath:/META-INF/resources/, classpath:/resources/, classpath:/static/, classpath:/public/
```
这样，Spring项目就可以加载Vue的静态资源。
构建Vue应用：在另一个目录中，使用Vue CLI创建一个新的Vue项目。在项目目录中，使用以下命令来构建Vue应用：
```
vue create my-app
```
根据提示选择所需的配置选项。
将Vue应用打包：在Vue项目目录中，运行以下命令来打包Vue应用：
```
npm run build
```
这会在dist目录中生成打包后的Vue应用。
将打包后的Vue应用复制到Spring项目中：将打包后的Vue应用中的所有文件（除了index.html）复制到Spring项目的静态资源文件夹中。
创建一个Controller：在Spring项目中创建一个Controller来处理和返回Vue应用的页面。可以使用@Controller和@RequestMapping注解来定义控制器和请求映射。
返回Vue应用的入口文件：在Controller中，使用以下代码返回Vue应用的入口文件index.html：
```
@Controller
public class VueController {

    @RequestMapping("/")
    public String index() {
        return "forward:/index.html";
    }
}
```
这会将所有以/开头的请求都映射到index.html。
运行Spring项目：运行Spring项目，访问http://localhost:8080，就可以看到Vue应用已经成功集成到Spring项目中。

以上是配置Vue.js在Spring中的基本步骤。需要注意的是，如果Vue应用和Spring项目是在不同的端口上运行，还需要进行跨域设置。可以使用Spring的CORS（跨源资源共享）配置来处理跨域请求。

1年前 0条评论

不及物动词

这个人很懒，什么都没有留下～

要在Spring中配置Vue，可以按照以下步骤进行操作：

创建一个Spring Boot项目：
首先，需要创建一个Spring Boot项目。可以使用Spring Initializr网站（https://start.spring.io/）或者在IDE中直接创建。

添加Vue依赖：
在项目的pom.xml文件中，添加Vue相关的依赖。主要包括：

webpack-dev-server：用于开发环境下的热重载和代理；
vue-loader：用于加载Vue组件；
vue-template-compiler：用于编译Vue的模板。

可以通过以下方式添加这些依赖：

<dependencies>
    <!-- 其他依赖 -->
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-web</artifactId>
    </dependency>
    <!-- Vue依赖 -->
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-tomcat</artifactId>
        <scope>provided</scope>
    </dependency>
    <dependency>
        <groupId>org.webjars.npm</groupId>
        <artifactId>webpack-dev-server</artifactId>
        <version>3.11.2</version>
    </dependency>
    <dependency>
        <groupId>org.webjars.npm</groupId>
        <artifactId>vue-loader</artifactId>
        <version>15.9.6</version>
    </dependency>
    <dependency>
        <groupId>org.webjars.npm</groupId>
        <artifactId>vue-template-compiler</artifactId>
        <version>2.6.11</version>
    </dependency>
</dependencies>

配置Vue的Webpack打包：
在项目的根目录下，创建一个vue.config.js文件。在该文件中，可以配置Vue的Webpack打包相关的内容。例如：

module.exports = {
    outputDir: 'src/main/resources/static',
    devServer: {
        proxy: 'http://localhost:8080' // 配置代理，将Vue的请求转发给Spring Boot应用
    }
};

创建Vue组件：
在src/main/resources/static目录下，创建一个vue文件夹，并在该目录下创建Vue组件。例如，可以创建一个HelloWorld.vue文件，内容如下：

<template>
    <div>
        <h1>{{ message }}</h1>
        <button @click="changeMessage">Click Me</button>
    </div>
</template>

<script>
export default {
    data() {
        return {
            message: 'Hello, World!'
        };
    },
    methods: {
        changeMessage() {
            this.message = 'Hello, Vue!';
        }
    }
};
</script>

创建Spring Boot控制器：
在src/main/java目录下，创建一个控制器类，用于处理Vue组件的请求。例如，可以创建一个HelloController类，内容如下：

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;

@Controller
@RequestMapping("/hello")
public class HelloController {

    @GetMapping
    public String hello() {
        return "hello";
    }
}

创建Spring Boot入口类：
创建一个Spring Boot入口类，例如App.java。内容如下：

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;

@SpringBootApplication
public class App {

    public static void main(String[] args) {
        SpringApplication.run(App.class, args);
    }

}

配置页面路由：
在src/main/resources/static目录下，创建一个index.html文件。在该文件中，可以配置Vue的页面路由，例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue with Spring</title>
</head>
<body>
    <div id="app">
        <router-view></router-view>
    </div>
    <script src="/dist/js/app.js"></script>
</body>
</html>

编译和打包Vue：
在命令行中，进入到项目的根目录下，执行以下命令：
```
npm install // 安装依赖
npm run build // 编译和打包Vue
```
执行完以上命令后，Vue的打包文件将会生成在src/main/resources/static/dist目录下。
运行Spring Boot应用：
可以直接使用IDE运行Spring Boot应用，或者使用以下命令执行：
```
mvn spring-boot:run
```
访问Vue页面：
打开浏览器，访问http://localhost:8080/hello，即可看到Vue组件的页面。

通过以上步骤，就可以实现在Spring中配置Vue，并且通过Spring Boot应用来提供访问Vue页面的功能。同时，也可以通过调整Vue的Webpack配置来满足特定需求。

1年前 0条评论