webpack +vue如何只编译src下的部分文件夹中的vue/js/css 5C

如题,src下有src/components和src/components-1.1,我想只编译前者中的vue,忽略编译后者,如何做到?
试了下在vue-loader中exclude:[path.resolve(__dirname,'../src/components-1.1')]
但是运行时编译不通过,提示You may need an appropriate loader to handle this file type.无法处理其中的vue文件

4个回答

不知道你的需求,报错难道不是应该的么?

你不用vue-loader去编译后者的代码,然后后者的代码是.vue格式的文件,这样的格式文件在webpack中你没有配置相应的loader去编译他。
所以报错!!!

这个逻辑不是很正常么?

建议题主说说自己的具体需求

可能的解决办法,如果不想编译后者的代码,你只需要保证你编译代码中没有引入该vue文件,他就不会编译。所以题主可能需要找找其他文件中有没有引入后者目录的vue文件

wm5920
球球之家 嗯,很感谢,我试了一下,如果没有引用其他版本下的vue,打包的时候就不会打包进去,这样就解决了我的问题,我之前以为src下的文件都会打包进去的
一年多之前 回复
stopllL
white_g 回复球球之家: 不知道这样说你理解么 就是src如果有一个a.vue,一个b.vue,如果你webpack的入口文件是a.vue 并且你的a.vue没有应用b.vue,那么webpack打包自然就不会和b.vue有关系。webpack打包并不是按照文件夹来打包。如果你的a. vue引用了b.vue,那么webpack在打包a.vue的时候发现有个b.vue的路径,所以他就去把b.vue编译打包进去。 然后给你解释下打包中的逻辑,首先是把vue文件转为js,那么你a.vue引用了b.vue,然后b.vue又不让编译。那你说如果正常编译了,代码是什么样子的?a.vue编译成了a.js然后把b.vue不编译直接引用进来? 所以说这么多,根本原因是既然你a.vue和b.vue是两个完全不同的版本,那你的a.vue干嘛要去引用b.vue?
一年多之前 回复
stopllL
white_g 回复球球之家: webpack编译就是顺着你的入口文件然后匹配对应的各种url,组织成的是一个树状图。你树状图中有的就是你文件需要用到的。你说的你不同版本,你不同版本不要版本1引入版本2的代码就行了。就好比你说的100个版本,只要你每个版本的代码是完全的,入口文件配置到版本1的入口文件,然后顺着入口文件打包相应应用文件,实现的逻辑这是OK的啊。你说另外99个版本会编译,他会编译的原因是你版本1中引入了另外99个版本中的代码。首先者本来就不合规范啊。何况你既然在版本1中应用了版本2的代码,为什么不让版本2的代码编译? 打包版本1的时候给你把所有版本都打包的原因是你版本1引入了其他版本的代码。
一年多之前 回复
wm5920
球球之家 目前看来通过vue-loader来实现部分代码编译的方法行不通的,我的需求是src下的某个模块会有多个版本,比如一个模块有100个版本,但是我只需要用到一个版本,总不能每次编译都全部编译吧,会拖慢编译速度。所以我想通过webpack去把那些不需要的版本排除掉,当然笨方法就是把其他版本的文件夹删掉,这样也能达到部分编译的效果
一年多之前 回复
wm5920
球球之家 因为我不想去加载那个文件夹下的vue,所以会报这个错,怎么让webpack不报这个错呢?目的是想达到后端maven的pom效果,要编译哪个模块就编译哪个,而不是全部编译
一年多之前 回复

改下makefile中源文件的路径,让其只能找到要编译的文件。

wm5920
球球之家 用vue初始化的项目中没有makefile文件,这个文件有参考教程吗,谢谢大神
一年多之前 回复

vue有一个功能,就是你在哪个vue文件写上这个,里面的css样式只在该vue文件才生效,不会影响其他vue文件

style

```<style  scoped></style>




Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
其他相关推荐
webpack +vue如何只编译src下的部分文件夹中的vue/js/css
如题,src下有src/components和src/components-1.1,我想只编译前者中的vue,忽略编译后者,如何做到?rn试了下在vue-loader中exclude:[path.resolve(__dirname,'../src/components-1.1')]rn但是运行时编译不通过,提示You may need an appropriate loader to handle this file type.无法处理其中的vue文件
webpack 中如何使用vue
-
在webpack中使用vue
这篇文章主要介绍如何在webpack中使用vue。 1. 基于webpack-study构建的项目框架在webpack中使用vue 1.1 将webpack-study中除了node_modules文件夹都拷贝到新的项目中,src目录下只保留main.js和index.html 1.2 安装vue # 重新安装所有依赖包 npm i # 将vue安装到项目的依赖中 npm i vue ...
vue中webpack的配置
vue中webpack的配置webpack 是一个现代 JavaScript 应用程序的静态模块打包器。当 webpack 处理应用程序时,它会递归地构建一个依赖关系图(dependency graph),其中包含应用程序需要的每个模块,然后将所有这些模块打包成一个或多个 bundle。npm init -y(生成package.json文件)实时打包:npm i webpack-dev-serv...
Vue 引入全局以及部分js css
js 全局 在main.js中导入  import utils from './utils/utils.js' 声明 Vue.prototype.$utils = utils 在vue 里面就this.$utils.click() js 单独 此方法用在单个Vue文件中,通过import {xxx} from ‘路径’引入你的方法 css 全局 在main.js   引入impor...
【vue】webpack中less的配置与编译
Pre:结构     一、首先通过npm安装less和less-loader npm install less --save-dev npm install less-loader --save-dev  npm install css-loader --save-dev  npm install style-loader --save-dev  ...
VUE:vue build后部分js不执行
vue本地npm run dev js 运行正常; npm run build 后将dist文件夹拷贝到tomcat中不分js不执行; 问题解决 打开tomcat下dist/static下发现大量js,而生成的dist下只有6个 将tomcat下dist删除后再拷贝,js运行正常。 ...
java的src和webpack vue的src冲突 怎么处理呢
java的src和webpack vue的src冲突 怎么处理呢
vue项目src文件夹重命名问题
问题: vue初学者在学习vue的时候往往需要在一个项目中建多个不同的src文件来测试vue的各个小功能,但每一个功能都需要重新运行项目,第一次修改src的名字,重新建一个src的时候,运行项目却发现运行的还是之前的项目 问题分析: 编译环境:webstorm 在重命名src文件的时候,会出来两个复选框,默认是勾选的,勾选的作用是如果修改了这个文件名,则项目 中只要用到该src文件的时候机...
vue中static文件夹
使用vue-cli创建项目时,发现文件结构中有一个叫做static的文件夹。图片一类的静态文件,应该放在这个static文件夹下,这个文件夹下的文件(夹)会按照原本的结构放在网站根目录下。这时我们再去使用/static绝对路径,就可以访问这些静态文件了 例如在head.vue组件中使用图片时: ...
在vue中上传文件与文件夹
上传东西无论文件也好,还是文件夹都需要用到 &amp;amp;amp;amp;amp;lt;input type=&amp;amp;amp;amp;quot;file&amp;amp;amp;amp;quot; id=&amp;amp;amp;amp;quot;filepicker&amp;amp;amp;amp;quot; name=&amp;amp;amp;amp;quot;fileList&amp;amp;amp;amp;quot; multiple /&amp;amp;amp;amp;amp;gt;
vue中webpack 配置的注释
什么是webpack WebPack可以看做是模块打包机:它做的事情是,分析你的项目结构,找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言(Sass,TypeScript等),并将其转换和打包为合适的格式供浏览器使用。在3.0出现后,Webpack还肩负起了优化项目的责任。 其最主要的就是三点:打包,转换,优化 webpack 配置 module.exports = { ...
vue中的webpack属性配置
const path = require('path') module.exports = { entry:{ // main是默认入口,也可以是多入口 main:'./src/main.js' }, output:{ //出口 filename:'./build.js', 指定js...
vue中Webpack的使用-思维导图
4步:应该改为启动页面更合适,不是入口js。我们把js打包之后,还需要修改index.js。使用启动页面的插件后,就能自动完成这个操作。同时根据指定的index.html生成指定的index.HTML。 整个过程可理解为:index.tml-&gt;main.js-&gt;app.vue-&gt;router.js-&gt;helloworld.vue ...
webpack打包vue时提取css
webpack打包vue项目的时候默认会把vue里的css打包到页面上。 webpack.config.js里的plugins加上以下配置 new webpack.LoaderOptionsPlugin({ test:/\.vue$/, options: { vue: { loaders: {
vue中使用less编译css
我是用的vue-cli,先安装下载且运行成功vue-cli。 1、在package.json的依赖中先定义less和less-loader的版本: 这个是我现在用的版本:   2、cnpm install 下载less和less-loader依赖。 npm install less less-loader --save   3、使用:   &amp;lt;style lang=...
省略号。。。(css与vue下的js方式)
css方式省略号: 用省略号代替文字溢出部分,分为两种情况,一种是单行时,另一种是多行时 &amp;lt;span class=&quot;nav&quot; ::title=&quot;item.roleName&quot;&amp;gt;{{item.roleName}}&amp;lt;/span&amp;gt; 单行: .nav{     display:block; /*转换为块级元素*/     width:50px;  /*根据个人需要自定义宽度*/...
vue 引入外包css和js。
外部文件放在static。在需要的组件页面引入,就ok了
vue引入外部css和js
export default { name: 'MainPage', data () { return { } } @import '/static/css/easydialog.min.css';
vue 使用webpack打包图片,GZIP打包js和css压缩
vue 使用webpack打包图片,GZIP打包js和css压缩 1.打包压缩图片 ① 输入命令安装file-loader npm i -D file-loader ② 在webpack.config.js中的rules数组中添加file-loader的相关配置 require("image-webpack-loader") { test: /\.(png|jpe?g|gi...
vue 动态设置img的src地址无效,npm run build 后找不到文件
动态设置img的src属性无效,而直接写可以解决办法:    imgSrc写成require('path');原因:动态添加src被当做静态资源处理了,没有进行编译npm run build 后出现 xxxxxxx net::ERR_FILE_NOT_FOUND解决办法:    进入:build文件夹 &amp;gt; 打开 webpack.prod.conf.js    找到:output 对象    ...
vue渲染src
vue渲染src 正确错误对比图 数据结构: 渲染:
[Vue] Vue中css的动画原理
Vue中css的动画原理 例子 参考代码:code 实现功能: 1. Vue实现过渡效果 2. 过渡效果原理 3. 过渡类名 4. 自定义过渡类名 Vue实现过渡效果 1. DOM节点 &amp;lt;div id=&quot;root&quot;&amp;gt; &amp;lt;transition name=&quot;fade&quot;&amp;gt; &amp;lt;div v-show=&quot;show&quot;&amp;gt;Hello Animation&amp;lt;/
Vue学习前奏—webpack
Vue学习前奏—webpack 第一步:安装Node.js  下载地址:http://nodejs.cn/download/  安装就是傻瓜式的,一直下一步就可以。安装完毕后可以通过cmd输入npm -v查看是否安装成功。//node a.js 可以运行a.js  npm(node package manage of JavaScript)作用:Node.js下载后自带npm,类似于迅雷,可以下载...
vue进阶篇- 使用webpack
一、前段工程化与webpakc Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析,然后将这些模块按照指定的规则生成对应的静态资源。 从图中我们可以看出,Webpack 可以将多种静态资源 js、css、less 转换成一个静态文件,减少了页面的请求。 webpack的主要使用场景是单页面富应用(spa)。spa通常是由一个html文件和一堆按需加载的js组成,如:...
vue——webpack设置
1、跨域代理配置 使用 vue-cli 创建vue项目,在config配置文件夹下的index.js中,dev属性中有关于跨域代理的 proxyTable 属性,默认为空属性, proxyTable: { '/api':{ target:'http://localhost:3000', //目标URL地址 changeOrigin: t...
Vue、webpack项目构建模板
项目根目录 package.json:导入包的信息及scripts配置(运行npm start自动打包编译、启动浏览器、热更新)。 { &quot;name&quot;: &quot;c&quot;, &quot;version&quot;: &quot;1.0.0&quot;, &quot;main&quot;: &quot;main.js&quot;, &quot;dependencies&quot;: { &quot;bootstrap&quot;: &quot;^3
webpack vue 打包优化
webpack vue 打包优化 问题描述 在项目优化中,有一种方案,不经常更新的第三方包可以不打在 vendor.js 中,可以在 .html 模板中引入,然后在 webpack 中配置排除这些包,但是会遇到一个问题,就是开发环境中,如果排除掉 vue.js 不打入 vendor.js 中,则无法使用 vue devtools 进行调试,如果不排除 vue.js ,则又会和模板中引入的...
vue webpack环境搭建
安装环境1、使用命令台控制程序,安装 nodejsbrew install nodejs2、安装淘宝镜像npm install -g cnpm –registry=https://registry.npm.taobao.org3、安装webpackcnpm install webpack -g4、安装vue脚手架npm install vue-cli -g创建项目1、新建项目目录,在终端中进入该目录
webpack在vue项目实战的基本操作
webpack官网地址https://doc.webpack-china.org/也可参考(项目建设)http://blog.csdn.net/u010020858/article/details/72865101首先要有node环境以及下载cnpm。然后开始下载webpack。1、cnpm init (然后name:你取得名字,然后一路回车。)或是使...
webpack打包vue项目
命令行指令 npm run build1.vue cli给我们提供了npm run build命令打包项目,在packa.json文件中scripts对象中有build属性,当我们执行npm run build时,就执行build对应的&quot;node build/build.js&quot;脚本build完成后显示进入项目文件夹,找到dist文件夹,这些是打包后产生的文件2.webpack打包过程中会将css和...
Vue webpack打包部署项目
1.问题描述: 今天,要将使用 Vue 前端框架编写的项目,想要在服务器进行项目的部署,由于Vue框架的 webpack 具有打包功能,但是在打包到部署过程中还存在一些问题,现在我将打包部署过程进行详细的描述一次,避免以后踩坑。 Question:可能会出现在浏览器浏览项目,出现空白页的情况。 2.问题解决办法: 通过查询资料,产生空白页的原因是由于项目的路径有问题。对项目打包时的路...
Vue项目-webpack打包
Vue项目打包 1.通过git 输入如下命令: npm run build 运行打包命令:注意 build 并不是固定写法,若想修改,可以自行在package.json文件中修改。 运行打包命令成功后,就会生成一个dist文件夹,直接将该文件丢到需要服务器即可上线。 注意:打包时,在项目的index.js(入口文件)文件中,axios的默认URL需要改成服务器的地址。 2.如果想在自己电脑...
vue webpack打包路径
vue项目开启history模式,本地dev找不到页面, webpack打包后页无法显示,请教改怎么写路径
vue环境搭建(webpack)
vue环境搭建(webpack)
Vue学习笔记5——Webpack
  学习笔记的代码在我的gihub: https://github.com/masterzz/vue-learn   1,在网页中会引用哪些常见的静态资源? (1)JS .js .jsx .coffee .ts(TypeScript 类 C# 语言) (2)CSS .css .less .sass .scss (好吧scss(https://www.sass.hk/)是世界上最成熟...
vue的webpack项目
webpack模板生成的vue项目,集成了基本的axios和element-ui
Vue入门(13)webpack下
1.解析es6 下载 npm i babel-core babel-loader babel-preset-env babel plugin-transform-runtime -S 配置 //处理es6,7,8 { test: /\.js$/, loader : 'babel-loader', exclude:/node_modules/,//排除掉node_m...
webpack下vue的路由配置
import Vue from 'vue' import Router from 'vue-router' Vue.use(Router) export default new Router({ routes: [ { path: '/', name: 'HelloWorld', component: reslove =&amp;gt; {requi...
初始化vue + webpack 项目
安装vue脚手架 npm install -g vue-cli 这样我们就可以全局试用 vue 这个命令 我们输入 vue list 可以看到许多基于vue 的项目模板 这里列出了 我们可以用到的模板 初始化一个webpack模板 vue init webpack projectname 于是生成了一个 webpack + vue 项目。...
相关热词 c#入门推荐书 c# 解码海康数据流 c# xml的遍历循环 c# 取 查看源码没有的 c#解决高并发 委托 c#日期转化为字符串 c# 显示问号 c# 字典对象池 c#5.0 安装程序 c# 分页算法