推荐最新

请问vue serve/build和npm run serve/build（vue-cli-service serve/build）到底有啥区别和联系啊？

如题，请问vue serve/build和npm run serve/build（vue-cli-service serve/build）到底有啥区别嘞，感觉有点搞不清楚，有没有大佬能帮忙解惑下，万分感谢~

浏览量343

vue项目中新建一个页面编译正常但el报错？

https://wmprod.oss-cn-shanghai.aliyuncs.com/images/20241221/f69bbb3a1202ebba77152dc648d1ff39.pnghttps://wmprod.oss-cn-shanghai.aliyuncs.com/images/20241221/1a48fa24a1fe30480577894f33b35a0f.pnghttps://wmprod.oss-cn-shanghai.aliyuncs.com/images/20241221/841ac5ea62d24fcd1e388c854dd6c0a8.png https://wmprod.oss-cn-shanghai.aliyuncs.com/images/20241221/841ac5ea62d24fcd1e388c854dd6c0a8.pnghttps://wmprod.oss-cn-shanghai.aliyuncs.com/images/20241221/10225381f70fc6e0c71254da02f334a4.pnghttps://wmprod.oss-cn-shanghai.aliyuncs.com/images/20241221/8d6531d7838238f8a4acdba0b4fc3e1f.pnghttps://wmprod.oss-cn-shanghai.aliyuncs.com/images/20241221/2695abab3b0735fa23f03cb549402639.png

浏览量243

CO_co

如何修改vue-cli3预设的terser-webpack-plugin？

现有一个基于vue-cli3和webpack4的vue2项目，我使用vue-cli-service inspect命令导出webpack配置后，minimizer部分如代码所示： minimizer: [ { options: { test: /\.m?js(\?.*)?$/i, chunkFilter: () => true, warningsFilter: () => true, extractComments: false, sourceMap: false, cache: true, cacheKeys: defaultCacheKeys => defaultCacheKeys, parallel: true, include: undefined, exclude: undefined, minify: undefined, terserOptions: { compress: { arrows: false, collapse_vars: false, comparisons: false, computed_props: false, hoist_funs: false, hoist_props: false, hoist_vars: false, inline: false, loops: false, negate_iife: false, properties: false, reduce_funcs: false, reduce_vars: false, switches: false, toplevel: false, typeofs: false, booleans: true, if_return: true, sequences: true, unused: true, conditionals: true, dead_code: true, evaluate: true }, mangle: { safari10: true } } } } ] 可以看到，里面并没有new TerserPlugin()，但是里面确实又有terserOption，请问下大佬们这是不是vue-cli内置了terser插件，如果是内置插件的话为什么不会被inspect导出来呢，而且如果是这种没有new TerserPlugin()的情况，我该如何修改这个插件的配置或者删除这个插件以更换别的插件呢？

浏览量174

编程界菜niao

vue-cli3到底是如何调用webpack开始进行实际构建的？

从源码可以看到，执行"npm run build"命令后，先创建"Service"类的实例而后再调用其"run"方法，而"run"方法执行的则是"build"文件下"index.js"中注册的一个异步函数，一直追踪下去可以看到最终返回是在这里： return new Promise((resolve, reject) => { // 用webpack模块执行处理后的配置 webpack(webpackConfig, (err, stats) => { stopSpinner(false); if (err) { return reject(err); } if (stats.hasErrors()) { return reject(`Build failed with errors.`); } if (!args.silent) { const targetDirShort = path.relative(api.service.context, targetDir); log(formatStats(stats, targetDirShort, api)); if (args.target === "app" && !isLegacyBuild) { if (!args.watch) { done( `Build complete. The ${chalk.cyan( targetDirShort )} directory is ready to be deployed.` ); info( `Check out deployment instructions at ${chalk.cyan( `https://cli.vuejs.org/guide/deployment.html` )}\n` ); } else { done(`Build complete. Watching for changes...`); } } } // test-only signal if (process.env.VUE_CLI_TEST) { console.log("Build complete."); } resolve(); }); 可以看到其最终调用了一个通过"const webpack = require("webpack")"引入的"webpack()"，但点击跳转之后是一个"types.d.ts"文件，从这之后我就不明白后续是如何构建的，有没有了解"vue-cli"或"webpack"的大佬能说一下"webpack()"拿到配置后是如何构建的吗

浏览量408

momo

vue-cli-servic build 打包后生成非常多的js和css文件，怎么办？

我的一个单页面的后台管理系统，用的是vue-cli3开发的，之前打包都正常 "image.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/images/20241228/98ec0b65452439638dce6b361f184479.png) 我本地的也正常，前一阵子打开正式环境发现一打开加载了1700多个请求，人都傻了，发现除了我本地打包的和jenkins测试环境打包的都没问题，就正式环境有问题，然后突发奇想吧测试库的代码删除重新拉取，问题复现了，我复制了本地代码除了node_modules，重新打包也复现了，我实在找不出原因，有大佬遇到过吗？我没碰vue.config.js "image.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/images/20241228/c4cf28f2aa6b6e78181bdeeab7fc148e.png) "image.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/images/20241228/7957daa3972ea0c3811fa02320dbe23d.png) "image.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/images/20241228/04134bf4b8690a6c5dd5b887dfae3f4b.png) "image.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/images/20241228/a8c58b2dca061fe77f920d01ab691602.png) 我人都麻了1370个文件什么都没动就这样子文件太多了截不全 vue.config.js const path = require('path') const os = require('os') const CompressionPlugin = require('compression-webpack-plugin') function resolve (dir) { return path.join(__dirname, dir) } let localIp = '127.0.0.1' const ni = os.networkInterfaces() for (let key in ni) { const item = ni[key] const ip = item.find(i => i.family === 'IPv4') localIp = ip.address break } // vue.config.js module.exports = { transpileDependencies: [/^((?!@jeecg).)*((?!@jeecg).)*$/], /* Vue-cli3: Crashed when using Webpack `import()` #2463 https://github.com/vuejs/vue-cli/issues/2463 */ // 如果你不需要生产环境的 source map，可以将其设置为 false 以加速生产环境构建。 productionSourceMap: false, // 打包app时放开该配置 // publicPath: './', configureWebpack: config => { // 生产环境取消 console.log if (process.env.NODE_ENV === 'production') { config.optimization.minimizer[0].options.terserOptions.compress.drop_console = true // 拆分打包 const SplitChunk = config.optimization.splitChunks SplitChunk.cacheGroups.antv = { name: 'antv', test: /[\\/]node_modules[\\/]@antv[\\/]/, minChunks: 1, priority: -3, chunks: 'all', reuseExistingChunk: true } SplitChunk.cacheGroups.tinymce = { name: 'tinymce', test: /[\\/]node_modules[\\/]tinymce[\\/]/, minChunks: 1, priority: -4, chunks: 'all', reuseExistingChunk: true } SplitChunk.cacheGroups.lodash = { name: 'lodash', test: /[\\/]node_modules[\\/]lodash[\\/]/, minChunks: 1, priority: -2, chunks: 'all', reuseExistingChunk: true } SplitChunk.cacheGroups.codemirror = { name: 'codemirror', test: /[\\/]node_modules[\\/]codemirror[\\/]/, minChunks: 1, priority: -1, chunks: 'all', reuseExistingChunk: true } } }, chainWebpack: (config) => { config.resolve.alias .set('@$', resolve('src')) .set('@mock', resolve('mock')) .set('@api', resolve('src/api')) .set('@assets', resolve('src/assets')) .set('@comp', resolve('src/components')) .set('@views', resolve('src/views')) .set('@layout', resolve('src/layout')) // 生产环境，开启js\css压缩 if (process.env.NODE_ENV === 'production') { config.plugin('compressionPlugin').use(new CompressionPlugin({ test: /\.(js|css|less)$/, // 匹配文件名 threshold: 10240, // 对超过10k的数据压缩 deleteOriginalAssets: false // 不删除源文件 })) } // 配置 webpack 识别 markdown 为普通的文件 config.module .rule('markdown') .test(/\.md$/) .use() .loader('file-loader') .end() }, css: { loaderOptions: { less: { modifyVars: { /* less 变量覆盖，用于自定义 ant design 主题 */ 'primary-color': '#1890FF', 'link-color': '#1890FF', 'border-radius-base': '4px' }, javascriptEnabled: true } } }, devServer: { host: '0.0.0.0', port: 3000, public: `${localIp}:3000`, disableHostCheck: true }, lintOnSave: false } package.json { "name": "vue-antd-jeecg", "version": "2.1.4", "private": true, "scripts": { "pre": "cnpm install || yarn --registry https://registry.npm.taobao.org || npm install --registry https://registry.npm.taobao.org ", "serve": "vue-cli-service serve --mode local", "serve:dev": "vue-cli-service serve --mode dev", "build:dev": "vue-cli-service build --mode dev", "build:prod": "vue-cli-service build", "lint": "vue-cli-service lint" }, "dependencies": { "@antv/data-set": "^0.10.2", "@jeecg/antd-online-214": "^2.1.41", "@tinymce/tinymce-vue": "^2.0.0", "@vant/touch-emulator": "^1.2.0", "ant-design-vue": "^1.7.8", "axios": "^0.18.0", "babel-plugin-dynamic-import-node": "^2.3.3", "clipboard": "^2.0.4", "codemirror": "^5.46.0", "dayjs": "^1.8.0", "dingtalk-jsapi": "^2.9.14", "enquire.js": "^2.1.6", "file-saver": "2.0.1", "js-cookie": "^2.2.0", "jsbarcode": "^3.11.5", "lodash.debounce": "^4.0.8", "lodash.get": "^4.4.2", "lodash.isequal": "^4.5.0", "lodash.pick": "^4.4.0", "md5": "^2.2.1", "nprogress": "^0.2.0", "qrcodejs2": "^0.0.2", "sortablejs": "^1.13.0", "tinymce": "^5.1.4", "vant": "^2.12.23", "viser-vue": "^2.4.4", "vue": "^2.6.10", "vue-class-component": "^6.0.0", "vue-cropper": "^0.4.8", "vue-draggable-resizable": "^2.3.0", "vue-i18n": "^8.17.3", "vue-loader": "^15.7.0", "vue-ls": "^3.2.0", "vue-photo-preview": "^1.1.3", "vue-print-nb": "^1.7.5", "vue-print-nb-jeecg": "^1.0.9", "vue-property-decorator": "^7.3.0", "vue-router": "^3.0.1", "vue-splitpane": "^1.0.4", "vuedraggable": "^2.24.3", "vuex": "^3.0.1", "vuex-class": "^0.3.1", "vxe-table": "^3.6.6", "xe-clipboard": "^1.10.1", "xe-utils": "^3.5.7", "xlsx": "0.14.1" }, "devDependencies": { "@babel/polyfill": "^7.12.1", "@babel/runtime": "^7.18.6", "@types/file-saver": "2.0.1", "@vue/cli-plugin-babel": "^3.3.0", "@vue/cli-plugin-eslint": "^3.3.0", "@vue/cli-service": "^3.3.0", "@vue/eslint-config-standard": "^4.0.0", "babel-eslint": "^10.0.1", "babel-plugin-import": "^1.13.0", "compression-webpack-plugin": "^3.1.0", "eslint": "^5.16.0", "eslint-plugin-vue": "^5.1.0", "html-webpack-plugin": "^4.0.0-beta.11", "less": "^3.9.0", "less-loader": "^4.1.0", "mockjs": "^1.1.0", "vue-template-compiler": "^2.6.10" }, "eslintConfig": { "root": true, "env": { "node": true }, "extends": [ "plugin:vue/strongly-recommended", "@vue/standard" ], "parserOptions": { "parser": "babel-eslint" }, "rules": { "generator-star-spacing": "off", "no-mixed-operators": 0, "vue/max-attributes-per-line": [ 2, { "singleline": 5, "multiline": { "max": 1, "allowFirstLine": false } } ], "vue/attribute-hyphenation": 0, "vue/html-self-closing": 0, "vue/component-name-in-template-casing": 0, "vue/html-closing-bracket-spacing": 0, "vue/singleline-html-element-content-newline": 0, "vue/no-unused-components": 0, "vue/multiline-html-element-content-newline": 0, "vue/no-use-v-if-with-v-for": 0, "vue/html-closing-bracket-newline": 0, "vue/no-parsing-error": 0, "no-console": 0, "no-tabs": 0, "indent": [ 1, 4 ] } }, "postcss": { "plugins": { "autoprefixer": {} } }, "browserslist": [ "> 1%", "last 2 versions", "not ie <= 10" ] }

浏览量250

无心插柳柳成萌

vue2中，vue-cli进行element-ui打包不放入check-vendor.js，而是单文件组件形式存在?

vue2中，vue-cli进行element-ui打包不放入check-vendor.js，而是单文件组件形式存在，比如el-input-683fb76c.js这种的，完全从check-vendor中抽离出来，而且是懒加载的形式。也就是说：如果home.vue组件使用了el-input组件，才会加载这个组件，而按照现在的打包方式，check-vendor会在页面一开始渲染就加载，包也很大，首页优化难做。所以能不能通过vue-cli的webpack配置完成这个打包，求解现在对一些组件使用注解魔法： let dNumber = ()=> import(/* webpackChunkName: "d-Number" */ '@/components/public/d-number'); 打包出来的文件名就是d-Number.js，但是不知道怎么抽离element-ui的每一个按需导入的组件，也形成懒加载的形式，或者check-vendor.js其实可以不存在，所有的资源都是懒加载形式

浏览量217

卑微实习僧

vue-cli的vue.config 添加自定义loader，引入无效?

写的自定义loader，匹配configCss文件夹下的index.css文件，vue.config.js配置如图，我感觉我配置的是正确的，但是终端控制台不显示我写的自定义loader的console，这是为什么啊~~~ "image.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/c/user/20241014/c249718438bb9ac59c9b06226441ab8b.png) "image.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/c/user/20241014/11522f3cb9abd9948c46da435e11db1c.png) "image.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/c/user/20241014/9dd4e1b9fa00b16954e3c83cff46c5b0.png) 希望写的自定义loader能读取index.css文件

浏览量171

应该是最帅的鹅

今天上午打包是正常，下午打包时报这样的错误是什么原因？

Error: Build failed with errors. Error: Build failed with errors. at E:\workspace\cmweb\CMDraw\konvaproject\node_modules\@vue\cli-service\lib\commands\build\index.js:207:23 at E:\workspace\cmweb\CMDraw\konvaproject\node_modules\webpack\lib\webpack.js:148:8 at E:\workspace\cmweb\CMDraw\konvaproject\node_modules\webpack\lib\HookWebpackError.js:68:3 at Hook.eval [as callAsync] (eval at create (E:\workspace\cmweb\CMDraw\konvaproject\node_modules\tapable\lib\HookCodeFactory.js:33:10), :6:1) at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (E:\workspace\cmweb\CMDraw\konvaproject\node_modules\tapable\lib\Hook.js:18:14) at Cache.shutdown (E:\workspace\cmweb\CMDraw\konvaproject\node_modules\webpack\lib\Cache.js:150:23) at E:\workspace\cmweb\CMDraw\konvaproject\node_modules\webpack\lib\Compiler.js:1225:15 at Hook.eval [as callAsync] (eval at create (E:\workspace\cmweb\CMDraw\konvaproject\node_modules\tapable\lib\HookCodeFactory.js:33:10), :6:1) at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (E:\workspace\cmweb\CMDraw\konvaproject\node_modules\tapable\lib\Hook.js:18:14) at Compiler.close (E:\workspace\cmweb\CMDraw\konvaproject\node_modules\webpack\lib\Compiler.js:1218:23) * 终端进程“C:\windows\System32\WindowsPowerShell\v1.0\powershell.exe -Command npm run build:development.Hisense”已终止，退出代码: 1。 * 终端将被任务重用，按任意键关闭。

浏览量162

销售经理537

怎么防止webpack打包Vue项目时泄露环境变量？

Vue-cli项目中，如何只插入process.env.VUE_APP_xx 参数，而不是插入全部参数 .env文件： VUE_APP_MENU = '1' VUE_APP_MAP_KEY = '123456' index.js： if(process.env.VUE_APP_MENU=='1'){ console.log('test') } webpack打包后的结果： let l=Object({NODE_ENV:"production",VUE_APP_MENU:"1",VUE_APP_MAP_KEY:"123456" if(l.VUE_APP_MENU=='1'){ console.log('test') } webpack打包会插入全部的VUE_APP_参数，即便没有使用，这会导致在入口js泄露一些参数如地图的key：VUE_APP_MAP_KEY。如何配置才能得到下方打包结果？ if("1"=='1'){ console.log('test') }

浏览量181

sumous_01

Vue2.0移动端PDF预览问题：iOS设备文件内容多显示不全？

vue2.0移动端使用pdfjs-dist预览文件，在ios文件内容多显示不全（>50页）内容少可以正常显示，在安卓端无问题都可以正常显示想要的效果：pdf文件预览内容正常显示使用的pdfjs-dist@2.2.228，具体代码如下: import * as PDFJS from 'pdfjs-dist' import pdfjsWorjer from 'pdfjs-dist/build/pdf.worker.entry' PDFJS.GlobalWorkerOptions.workerSrc = pdfjsWorjer loadFile (url) { let loadingTask = PDFJS.getDocument({ url: url, withCredentials: true // 携带凭证 }) loadingTask.promise.then(pdf => { this.pdfDoc = pdf this.pdfPages = pdf.numPages this.$nextTick(() => { this.renderPage(1) }) }).catch(err => { console.log(err, 'loadingTask err') }) }, renderPage (num) { const that = this this.pdfDoc.getPage(num).then(page => { let canvas = document.getElementById('pdf-canvas' + num) let ctx = canvas.getContext('2d') let dpr = window.devicePixelRatio || 1 let ratio = dpr // screen.availWidth 屏幕可用宽度 let viewport = page.getViewport({scale: screen.availWidth / page.getViewport({scale: this.pdfScale}).width}) canvas.width = viewport.width * ratio canvas.height = viewport.height * ratio canvas.style.width = viewport.width + 'px' canvas.style.height = viewport.height + 'px' that.pdfWidth = viewport.width + 'px' canvas.style.height = viewport.height + 'px' ctx.setTransform(ratio, 0, 0, ratio, 0, 0) // 将 PDF 页面渲染到 canvas 上下文中 let renderContext = { canvasContext: ctx, viewport: viewport } page.render(renderContext) if (this.pdfPages > num) { this.renderPage(num + 1) } }) }

浏览量151