前端vue项目打包的代码dist文件, 加载的css和js全部都带上了请求的路径加上static,设置把请求的dist去掉

在Vue项目中，打包生成的文件通常位于项目的`dist`目录中。`dist`是“distribution”的缩写，意为分发版。以下是`dist`目录中常见的文件和文件夹及其作用： 1. **index.html**：这是应用程序的入口文件。它包含了引入编译后的JavaScript和CSS文件的`<script>`和`<link>`标签。 2. **static/**：这个文件夹包含了静态资源文件，如图片、字体等。这些文件在打包过程中不会被处理，直接复制到`dist`目录中。 3. **js/**：这个文件夹包含了编译后的JavaScript文件。这些文件是应用程序的主要逻辑部分。 4. **css/**：这个文件夹包含了编译后的CSS文件。这些文件包含了应用程序的样式。 ### 打包过程 在Vue项目中，通常使用`npm run build`命令来打包项目。打包过程中，Webpack会处理所有的模块依赖，压缩和混淆代码，并将所有资源文件合并到`dist`目录中。 ### 部署 生成`dist`目录后，你可以将其部署到任何Web服务器上，如Nginx、Apache等。只需将`dist`目录的内容复制到服务器的根目录或任何指定的目录中即可。 ### 配置 在`vue.config.js`文件中，你可以配置打包的输出目录、静态资源路径等。例如： ```javascript module.exports = { outputDir: 'dist', assetsDir: 'static', publicPath: '/', // 其他配置项 }; ``` 通过这些配置，你可以自定义打包后的文件结构和路径。

### 将Vue.js前端应用与Spring Boot Java后端整合并打包为单个JAR文件 #### 构建Vue.js项目 为了将Vue.js构建的前端应用程序集成到Java后端中，首先需要确保Vue.js项目的`dist`目录能够被嵌入到Spring Boot的应用程序资源路径下。这可以通过调整Vue.js项目的配置来完成。 在Vue CLI创建的项目中，默认情况下运行`npm run build`会生成一个位于根目录下的`dist`文件夹，该文件夹包含了所有用于生产环境的静态资源文件（HTML、CSS和JavaScript）。这些文件应该放置于Spring Boot项目的`src/main/resources/static/`目录内以便访问[^1]。 ```bash cd vue-project/ npm install npm run build cp -r dist/* ../java-springboot-app/src/main/resources/static/ ``` 上述命令序列完成了从安装依赖项到复制编译后的前端资产至指定位置的操作。 #### 修改Maven配置以支持前后端联合部署 为了让最终打出来的JAR包既包含后端逻辑又携带前端页面，在POM.xml里加入如下设置： ```xml <build> <plugins> <!-- ...其他插件... --> <plugin> <groupId>com.github.eirslett</groupId> <artifactId>frontend-maven-plugin</artifactId> <version>1.12.0</version> <configuration> <workingDirectory>${project.basedir}/../vue-client</workingDirectory> </configuration> <executions> <execution> <id>install node and npm</id> <goals><goal>install-node-and-npm</goal></goals> <phase>generate-resources</phase> <configuration> <nodeVersion>v18.16.0</nodeVersion> <npmVersion>9.5.0</npmVersion> </configuration> </execution> <execution> <id>yarn install</id> <goals><goal>yarn-install</goal></goals> <phase>generate-resources</phase> </execution> <execution> <id>yarn run build</id> <goals><goal>yarn-run</goal></goals> <phase>generate-resources</phase> <configuration> <arguments>build</arguments> </configuration> </execution> </executions> </plugin> <!-- Spring Boot Maven Plugin configuration remains unchanged as described in [^2]--> </plugins> </build> ``` 这段XML片段展示了如何利用`frontend-maven-plugin`自动处理Node.js环境搭建以及执行Yarn脚本来准备前端资源。注意这里的相对路径指向了外部存在的Vue客户端工程；实际操作时应根据实际情况调整此路径。 #### 调整Spring Boot启动类加载静态资源 最后一步是在Spring Boot应用的主要入口处添加对于静态资源的支持声明，从而允许HTTP请求直接映射到前端生成的内容上而无需额外路由转发。 ```java import org.springframework.context.annotation.Configuration; import org.springframework.web.servlet.config.annotation.ResourceHandlerRegistry; import org.springframework.web.servlet.config.annotation.WebMvcConfigurer; @Configuration public class WebConfig implements WebMvcConfigurer { @Override public void addResourceHandlers(ResourceHandlerRegistry registry) { if (!registry.hasMappingForPattern("/static/**")) { registry.addResourceHandler("/static/**").addResourceLocations("classpath:/static/"); } // Fallback to index.html for all other requests (SPA routing support) registry.addResourceHandler("/**") .addResourceLocations("classpath:/static/") .setCachePeriod(0); } } ``` 以上代码段实现了当接收到除API接口外任何URL模式的GET请求时都会尝试匹配`index.html`作为响应主体的功能，这对于单页应用程序(SPA)来说至关重要，因为它使得浏览器能够在不刷新整个页面的情况下导航不同视图。