vue-cli3项目配置不同打包指令，没有生成css文件--mode test

最新推荐文章于 2024-06-21 18:48:03 发布
最新推荐文章于 2024-06-21 18:48:03 发布
阅读量393 收藏
点赞数
分类专栏： # vue打包、配置 文章标签： 前端框架 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xilejie/article/details/130090526
版权

解决：
vue.config.js 中增加：

module.exports = {
css: {extract： true}, // 增加这行
devServer: {}
}

再次运行打包指令， 生成css文件正常。

陪着月亮
关注
专栏目录
vue工程打包后dist目录下无css目录，页面无css样式
weixin_43250455的博客
12-11 2977
新建vue工程，在打包test环境部署到docker出现无css样式，dist下无css文件夹； prod环境正常，有css样式，dist下有css文件夹。 本地npm run serve正常，prod环境正常，打包dev和test异常。 查看vue-cli文档，https://cli.vuejs.org/zh/config/#css-extract 有这一段 css.extract Type: boolean | Object Default: 生产环境下是 true，开发环境下是 false 是否将
vue项目——利用vue-cli3构建的项目打包上线
qq_40556950的博客
11-18 2238
1.vue-cli3打包上线 在项目完成得差不多得时候，就可以开始打包部署了。通常执行命令npm run build就可以完成打包，项目中生成一个dist文件夹。这个dist文件夹里面的东西就是我们前端的所有东西了。 2.vue-cli3打包报错console.log() 查阅资料发现，项目在编译打包上生产环境的时候是不能有console.log()信息打印输出的，但是我们在开发环境有时候调试代码...
vue test devlopment production三个环境对应的链接更改
longmushasha的博客
04-29 234
在 package.json 文件里 "scripts": { "start": "vue-cli-service --mode test serve", // 本地跑时对应test环境 "serve": "vue-cli-service --mode test serve", "build:uat": "vue-cli-service --mode development build",// 打包测试环境时，对应development环境 "build": "vue-c
vue-cli设置mode环境变量打包之后没有CSS文件
yuanqi3131的博客
12-29 1307
如下图设置了–mode xxb之后打包，只有js，img等文件夹却没有CSS文件夹。
Vue 项目打包之后，CSS 找不到问题
空晓天
01-23 8673
Vue 项目打包之后，CSS 找不到问题 记录日常开发中遇到的 坑 问题：我把vue项目打包之后放在本地的web环境下可以正常显示，但是我放到 nginx 服务器之后，找不到 css 文件，当时配置如下图 解决办法： 我将 打包的路径从 ‘/v4/’ 改成 ‘./’ 就可以了，在web环境上上，可以放在任何文件下都可以，只要把站点的运行路径指向该文件夹就好 这是我的一种解决办法，如果大家还有什么解决办法，可以在下方留言哦嘻嘻 ......
新版本vue-cli打包之后没有css文件
最新发布
qq_30351747的博客
06-21 386
新版本vue-cli打包之后没有css文件
Vue-cli打包后css样式出不来的解决办法
素描本里的男子的博客
07-31 5993
因为用vue做的大部分项目都是移动端，关于css样式不出来的解决办法 针对rem布局： 我们App.vue里肯定设置了如下样式 <template> <div id="app"> <!-- 组件缓存 --> <keep-alive> <router-view></router-view> &lt...
使用vue-cli4.0快速搭建一个项目的方法步骤
10-15
在 vue-cli 4.0 中，使用环境变量文件（.env）来区分不同环境的配置，如测试（test）、预览（preview）、生产（production）。需要在项目根目录下创建三个环境配置文件 `.env.test`、`.env.preview` 和 `.env....
vue-cli4打包最强优化（10M变300kb）
2301_77110865的博客
05-06 630
自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！
vue-cli 3.x 项目打包配置-vue.config.js
pamerely的博客
04-14 4149
这里写自定义目录标题前言npm run build配置-package.json.env.dev文件.env.prod文件vue配置文件-vue.config.js路由改成hash模式-router.js插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图...
vue-cli3项目完整配置
努力努力再努力w
02-04 873
一、项目目录 二、vue.config.js 需求： 项目打包时，文件后缀增加时间戳（防止服务器缓存） 加载less公共文件 跨域代理 const path = require("path"); const Timestamp = new Date().getTime(); module.exports = { configureWebpack: { output: { // 输出重构 打包编译后的 文件名称 【模块名称.版本号.时间戳】 filename: `[name].${Ti
vue 测试环境配置test
m0_67658927的博客
02-06 368
注意：日常开发是用开发环境的，如果发布到线上时，需要切换环境为线上。如果人为去切换也是可以的，但是会容易忘记，可以通过配置不同的运行命令来自动切换环境。步骤一：手动创建 文件 .env.development 和.env.production和.env.test几个文件。.env.production如下：（正式线上环境，或者叫生产环境）一种是生产环境，就是要发布到线上的环境。一种是开发环境，就是本地开发时的环境，.env.development如下：（开发环境）.env.test（测试环境）
vue cli（webpack）增加发布到测试环境
weixin_34144848的博客
07-02 263
优化 vue-cli2实现：npm run build 发布到线上环境，npm run test 发布到测试环境，而不是每次切换发布环境的时候去代码里改具体的地址。 需求 打包的时候有两个地址，测试地址、线上地址，通过更改webpack配置实现npm run build打包时的API接口是线上地址，npm run test时的打包接口是测试环境地址。 1. package.json增加test...
如何为团队搭建一个Vue组件库,npm run build:css时遇到的问题3
weixin_46501763的博客
03-26 166
把const sass = require('gulp-sass')换成const sass = require('gulp-sass')(require('sass'))，这一步是把sass文件转换为css文件。3.再重新打包，此时在dist下生成了一个css文件。2.安装sass和gulp-sass。1.文件名gulpfile.js。
vue-cli打包后，找不到css、js文件问题的解决
AllenZouJ的博客
09-27 8144
搜了一些解决方案，发现很多人只贴一点代码，就说解决了。我照葫芦画瓢，却依然无法实现，这就导致我“既不知其然也不知其所以然”。于是我研究了config/index.js的配置，摸索出找到静态文件的方法，分享如下： 先说需求： a.我希望打包出来的结构是： （别问为什么这么麻烦，都是项目需要/0.0\） dist - static ---- v...
Vue 环境变量和模式(设置通用baseUrl)
热门推荐
XiaoJL博客
05-30 7万+
Vue CLI3中可以通过设置环境变量和模式，可以根据不同模式加载不同的 baseUrl 地址。具体如下： 一、环境变量 1.描述 在 Vue 项目的根目录下可以创建以下文件来设置环境变量 .env # 在所有的环境中被载入 .env.local # 在所有的环境中被载入，但会被 git 忽略 .env.[mode] # ...
取消vue-cli打包自动压缩
tinalucky的专栏
02-23 3352
取消vue-cli打包自动压缩代码的方法 1、按下面的路径找到对应的配置文件 /build/webpack.prod.conf.js 2、CSS压缩--OptimizeCSSPlugin注释掉图中的代码 3、JS压缩--UglifyJsPlugin注释掉图中的代码 4、html压缩--HtmlWebpackPlugin，将 minify里布尔值改成false ...
在vue.config.jsz中,module.exports = { publicPath: './', outputDir: 'dist', assetsDir: 'static', },在package.json中{ "build": "vue-cli-service build", "build:test": "vue-cli-service build --mode test",}，npm run build时打包目录是正常的，npm run build:test时打包的文件没有按照文件类型归类到相应目录
06-06
根据你提供的信息，我猜测是因为在 `vue.config.js` 中没有配置不同文件类型的输出目录。你可以尝试在 `vue.config.js` 中添加如下代码： ```javascript module.exports = { publicPath: './', outputDir: 'dist', assetsDir: 'static', configureWebpack: { // 配置输出文件目录 output: { // js 文件输出目录 js: 'static/js/[name].js', // css 文件输出目录 css: 'static/css/[name].css', // img 文件输出目录 img: 'static/img/[name].[ext]', // font 文件输出目录 font: 'static/font/[name].[ext]', // 其他文件输出目录 other: 'static/other/[name].[ext]' } } } ``` 这样做可以让不同类型的文件输出到不同的目录下，方便后续的管理和维护。注意，这个配置只会对 `npm run build` 命令生效，对于 `npm run build:test` 命令可能需要单独配置。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值