Vue打包静态文件js css到static目录

最新推荐文章于 2023-09-17 11:44:54 发布
原创 最新推荐文章于 2023-09-17 11:44:54 发布 · 276 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#javascript #vue.js #css #前端 #ecmascript

本文介绍如何通过修改vue.config.js文件来指定Vue项目的静态资源目录为'static'，并展示了构建后的dist文件夹内包含的文件。 
// vue.config.js
module.exports = {
...
// 加入下面这行即可,如果加到最后，需要把逗号去掉。
assetsDir:"static"，

...
}

npm run build
ls dist
favicon.ico index.html  static
captain_bj
关注
vue-cli4打包（vue.config.js）修改js，css，img，fonts的输出路径
个人博客
05-23 1659
【代码】vue-cli4打包（vue.config.js）修改js，css，img，fonts的输出路径。
Vue3打包将静态文件打包到static目录下
weixin_43496695的博客
02-05 4404
VUE3打包将静态文件打包到static目录下Vue3打包将静态文件打包到static目录下 Vue3打包将静态文件打包到static目录下 1、查看项目根目录下有没有vue.config.js文件，如果没有则创建该文件 2、在vue.config.js文件下输入 module.exports = { presets: [ ‘@vue/cli-plugin-babel/preset’ ] } 3、打包项目：npm run build即可完成 打包后目录结构： ...
vue 配置vue.config.js 处理static文件夹下的静态文件
delebasou的博客
06-18 1万+
最近开发过程中遇到个小需求，需要根据需求动态配置一些静态数据，但我不想直接把这个静态文件引入进来，build时就会把数据打包到js文件中，造成js文件很大；呃呃。。。。（ps:就想给自己找点别扭） 回头看一下项目，果断的在根目录下创建一个static/test.json文件,在目标页面下fetch获取这个json文件里的数据： fetch("../static/test.json") .then(res => res.json()) .then(res => { //获取到了数据 }) .cat
vue-cli4打包最强优化（10M变300kb）
热门推荐
田兴的博客
10-15 2万+
一、去除生产环境sourceMap sourceMap资源映射文件，存的是打包前后的代码位置，方便开发使用，这个占用相当一部分空间 module.exports = { // 根据你的实际情况更改这里 publicPath, assetsDir: 'assets', lintOnSave: true, productionSourceMap: false, } 二、对资源文件进行压缩 需要下载 compression-webpack-plugin cnpm i compression
【自记】怎么让Vue打包的文件全部输出到同一个文件夹
foreversilent的专栏
08-16 1054
查看是否存在vue.config.js 文件， 如果不存在就百度一下，怎么添加vue.config.js 文件 然后在vue.config.js文件中添加配置 module.exports = { chainWebpack: config => { if (process.env.NODE_ENV === 'production') { let Version = new Date().getTime(); // 清除css，js版本号
vue打包后路径多了个/css/static
oopxiajun博客专栏
08-19 2091
vue打包后路径多了个/css/static导致一些css属性、字体文件等 效果不显示。 在build/utils.js文件中添加publicPath:’…/…/’,重新打包即可。 if (options.extract) { return ExtractTextPlugin.extract({ use: loaders, fallback: "vue-style-loader", publicPath: "../../" });
vue打包静态资源后显示空白及static文件路径报错的解决
10-14
关于Vue打包后路径中多了'/css/static'导致某些CSS属性不显示的问题，这通常是因为在构建过程中，Webpack对静态资源的路径处理出现了一些偏差。为了解决这个问题，需要在build/utils.js文件中调整publicPath的配置。...
Vue3的js代码：可放入static静态目录的js文件下使用前端vue框架
08-05
Vue3的js代码：可放入static静态目录的js文件下使用前端vue框架
Vue打包后访问静态资源路径问题
12-13
Vue介绍中static文件夹里放的是静态资源目录，如图片、字体等。 我们发现运行npm run start后本地图片路径是没问题的，但是打包上传后会怎么样呢？ 我们知道，执行npm run build 后会生成dist文件夹，把里面的index....
解决vue打包css文件中背景图片的路径问题
10-18
如果你的静态资源被打包到了dist/static目录下，那么可能需要设置为'./static/'。 需要注意的是，除了在utils.js中修改，还可以在vue.config.js文件中配置publicPath，这样可以更灵活地应对不同环境下的路径问题。...
vue项目打包时如何将静态文件打包到一个单独的文件夹
phplife的电子商务网上商城专栏
09-17 3890
vue项目打包时如何将静态文件打包到一个单独的文件夹
vue项目打包并部署到服务器
qq_44917563的博客
09-30 2699
vue项目打包 静态资源放到static文件夹 包括js、css、image，都放到static文件夹中 修改路径配置 config---index.js，找到assetsPublicPath:'/'；加个点：'./' 如果有设置背景图片，需要重定向一下路径，将背景图片修改为static平级；build/utils.js 在50行，fallback下面设置背景图片地址：publicPath:'...
vue webpack打包后图片、js、css路径错误的完美解决方法
ruanhongbiao的专栏
06-27 7216
项目用run dev build 打包后，发现很多图片都不显示，在本地是没有问题的啊！找原因发现通过webpack+vuecli默认打包的css、js等资源，路径都是绝对的。 1.css、js路径不对 解决方法：打开config/index.js，将其中的assetsPublicPath值改为’./’ 改了之后打包发现虽然css,js文件路径对了，但是css中引用的图片路径和elemen...
vue.config.js Vue打包配置详解
qq_47824967的博客
05-25 5610
module.exports = { //基本路径 文件打包后放的位置 publicPath:‘./’， //默认输出文件夹为dist，填入的名字为打包后的文件名 outputDir:‘name’, // 放置生成的静态资源 (js、css、img、fonts) 的 (相对于 outputDir 的) 目录。资源放的目录 assetsDir: “./static”, // 指定生成的 index.html 的输出路径 (相对于 outputDir)。也可以是一个绝对路径 index的路劲和名字 ind
WebPack4之打包css、image、js
Lonely Hobo的博客
11-22 630
首先需要webpack工具: npm i webpack -s 然后就是打包图片用到的file-loader npm i file-loader -s 最后就是打包css用到的css-loader(加载.css文件)、style-loader(使用<style>将css-loader内部样式注入到我们的HTML页面) npm install style-loader c...
vue、react js变量改变class中的属性
qq_37162688的博客
10-14 2813
以前写tab切换组件的时候，发现需要根据js的值，生成不同的class样式，开始想到的是map创建很多的class类，用js变量生成不同class名,傻方法如下： 今天发现这方法不靠谱，不能一劳永逸，所以换了个方法： 在style中根据js的值动态设置css中的变量 在class中调用这个css变量就可以动态生成不同属性的class ...
js或css文件合并的三种方式推荐
qq_45670012的博客
10-03 1196
源文档 <http://www.jb51.net/article/32834.htm> 在Web项目的开发中,js,css文件会随着项目的开发变得越来越多,越来越大,这就给给性能方面带来一些问题;解决...
chroot 后如何访问外部目录
stevenliyong 的专栏
10-13 1951
在chroot 下编译的时候，每次都需要手动将svn工作目录下branch拷贝到板子的nfs目录，因为chroot后无法访问外部目录, 感觉不是很方便。而且如果作了代码修改还在需要来回反复拷贝。 现在有简单的方法。#sudo mount -t none /home/stevenliyong/svn/my-project/Branch /tftpboot/nfs-steven/wor
vue下载静态文件
weixin_52594927的博客
08-01 1234
下载本地文件
vue打包后放到springboot中打包后 没有static 文件
最新发布
06-17
<think>我们正在解决将Vue打包后的项目集成到SpringBoot中时缺少static文件的问题。根据引用[1]，Vue.js构建后的静态资源通常在dist目录中，需要将这些资源复制到SpringBoot项目的src/main/resources/static目录下。另外，引用[3]提到，有时候访问不到html可能是因为被SpringBoot拦截了，或者路径配置不一致。解决方案步骤：1.构建Vue项目：在Vue项目中运行`npmrunbuild`，生成dist目录（包含static目录和index.html等文件）。2.复制静态资源：将dist目录下的所有文件复制到SpringBoot项目的src/main/resources/static目录下。3.配置SpringBoot以正确处理前端路由：由于Vue是单页面应用，需要配置SpringBoot将所有前端路由请求转发到index.html。如果仍然缺少static文件，可能是以下原因：-Vue构建的输出目录与SpringBoot的静态资源目录不一致。请确保复制的是整个dist目录的内容到static目录下。-检查Vue项目的配置文件（vue.config.js）中是否设置了正确的publicPath。在集成到SpringBoot时，通常publicPath设置为'/'（默认）即可。另外，引用[2]提到在部署到外部Tomcat时需要排除内嵌Tomcat，但这里我们主要关注静态资源问题，所以先不考虑部署方式。如果问题仍然存在，可以尝试以下步骤：1.清理SpringBoot项目的target目录，然后重新构建（mvncleanpackage）。2.确保复制操作正确，即dist目录下的文件都被复制到了src/main/resources/static下。关于路由转发配置，可以在SpringBoot中创建一个控制器，处理所有未匹配的路径，返回index.html：```java@ControllerpublicclassSpaController{@RequestMapping(value={"/","/{path:[^\\.]*}"})publicStringforward(){return"forward:/index.html";}}```或者使用WebMvcConfigurer配置（注意：如果使用SpringSecurity，需要允许静态资源访问）。根据引用[3]，还可能是跨域问题，但静态资源缺失与跨域无关，这里先不讨论。如果按照以上步骤操作后，问题仍然存在，请检查SpringBoot的日志，看是否成功加载了static目录下的资源。此外，引用[4]提到了处理二进制流（如语音文件）的示例，但我们的问题主要是静态资源缺失，所以不涉及。总结：主要步骤是复制dist目录下的所有内容到SpringBoot的static目录，并配置路由转发。生成相关问题：1.如何配置Vue的publicPath以适配SpringBoot的静态资源路径？2.SpringBoot中如何配置静态资源访问？3.如何解决Vue项目集成到SpringBoot后出现的404错误？</think>### Vue打包后集成Spring Boot缺少static文件的解决方案 #### 问题原因分析 1. **文件路径不一致**：Vue打包后的`dist`目录未正确复制到Spring Boot的静态资源目录 2. **构建配置缺失**：Vue的`vue.config.js`未配置正确的输出路径 3. **Spring Boot拦截问题**：后端拦截器可能阻止了对静态资源的访问[^3] 4. **缓存问题**：旧构建文件残留导致冲突 #### 解决方案步骤 1. **配置Vue输出路径** 在`vue.config.js`中设置与Spring Boot匹配的输出路径： ```javascript module.exports = { outputDir: '../spring-boot-project/src/main/resources/static', // 指向Spring Boot静态目录 publicPath: process.env.NODE_ENV === 'production' ? '/' : '/' } ``` 2. **执行Vue构建** ```bash npm run build # 生成dist目录到指定位置 ``` 3. **验证文件结构** 确保构建后Spring Boot的`resources/static`目录包含： ``` ├── static │ ├── css │ ├── js │ ├── favicon.ico │ └── index.html ``` 4. **配置Spring Boot路由**（关键步骤） 添加路由转发配置类[^1]： ```java @Configuration public class WebConfig implements WebMvcConfigurer { @Override public void addResourceHandlers(ResourceHandlerRegistry registry) { registry.addResourceHandler("/**") .addResourceLocations("classpath:/static/"); } @Override public void addViewControllers(ViewControllerRegistry registry) { registry.addViewController("/") .setViewName("forward:/index.html"); } } ``` 5. **排除静态资源拦截** 在安全配置中添加白名单： ```java @Configuration @EnableWebSecurity public class SecurityConfig extends WebSecurityConfigurerAdapter { @Override protected void configure(HttpSecurity http) throws Exception { http.authorizeRequests() .antMatchers("/", "/static/**", "/*.js", "/*.css") // 放行静态资源 .permitAll(); } } ``` 6. **清理构建缓存** 执行双端清理命令： ```bash # Vue端 rm -rf node_modules/.cache # Spring Boot端 mvn clean ``` #### 验证方法 1. 启动Spring Boot应用 2. 访问`http://localhost:8080/static/js/app.js` 验证JS文件可加载 3. 检查控制台无`404`静态资源报错 #### 常见问题处理 - **文件未更新**：删除`target/classes/static`后重新构建 - **路由冲突**：确保所有API接口使用`/api`前缀，与静态路径区分 - **跨域问题**：在Vue的`prod.env.js`中配置后端地址[^3]： ```javascript module.exports = { NODE_ENV: '"production"', API_BASE_URL: '"http://your-springboot-domain/api"' } ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值