Vue js开发代码工作正常，但Production build在打开时显示空白屏幕 - 腾讯云开发者社区

文章/答案/技术大牛

发布

vue-cli 解决白屏、兼容、压缩及清除console

从该文件夹打开 dist/index.html页面，发现页面空白，且控制台报错。原因是路径配置有问题。...方案根目录打开/新建 vue.config.js，配置路径： module.exports = { // 基本路径配置 publicPath: './' } 重新打包验证，问题得以解决。...IE白屏描述在打包完成之后，如果是pc项目，或者移动端低版本兼容项目，则会有许多问题，其中白屏问题困扰着很多开发者，在安卓4.0、IE多个版本环境中体现的尤为别致。...'es6-promise' Es6Promise.polyfill() 重启服务/重新打包页面正常显示，控制台无报错信息。...打包后清除控制台所有console信息描述在开发环境中，我们调试过程中会添加些许的 console.log或者 debugger相关代码，来帮助我们完成开发。

5K4 0

Vue 脚手架项目分析

// 原因是vendor包含了webpack在打包过程中会产生一些运行时代码，运行时代码中实际上保存了打包后的文件名。 // 当修改业务代码时,业务代码的js文件的hash值必然会改变。...在package.json的文件中我们定义了dev的运行脚本 "scripts": { "dev": "node build/dev-server.js", "build": "node...build/build.js" } 当运行 npm run dev的命令时，实际上会运行 dev-server.js文件。...由于在package.json中的配置，npm run build执行的是build.js文件。.../webpack.prod.conf') // 生产环境下的webpack配置 var spinner = ora('building for production...') // 在终端显示ora

2K4 0

您找到你想要的搜索结果了吗？

是的

没有找到

Vue+ElementUI 搭建后台管理系统（实战系列八）

= true 2：打开.env.local文件和.env.production文件,同上 3：打开vue.config.js，注释掉proxy，proxy代理在打包的时候需要注释，平时开发需要开着。...图片.png 解决办法，需要打开routers.js文件，路由模式将histroy改成hash模式，起初 mode:'history' 打开vue.config.js文件，打开 // hash 模式下可使用...在vue的项目开发完成之后，需要使用npm run build 在本地的dist静态目录打开，index.html进行访问的时候，会发现这样的一个问题。...那么，为什么在本地测试环境里面一些正常的项目，使用了npm run build:prod ，打包之后，就会出现了问题哩？...解决办法：在打包之前，将代理注释一下，打开vue.config.js文件，找到proxy 将这一段代码注释掉，重新打包即可解决问题。

1.1K2 0

IM跨平台技术学习(十一)：环信基于Electron打包Web IM桌面端的技术实践

4、第1步：准备工作1）克隆 vue3 Demo 项目到本地（vue3-demo的源码地址）；2）在编辑器内打开此项目并执行yarn install安装项目相关 npm 依赖；3）在此项目目录下打开终端请敲下...例如，在 Windows 中使用命令 set NODE_ENV=production 设置环境变量，而在 Unix/Linux/Mac 上则需要使用 export NODE_ENV=production...打包成功之后可以看到有一个 output 文件夹的生成，打开之后可以选择双击打开软件验证看下是否可以正常开启应用。...问题简述：发现只有在打包之后的 Electron 应用，启动后存在页面空白，dev 情况下正常。8.2解决手段1经排查，更改vue.config.js中publicPath的配置为‘./’。..../')，这样所有的资源都会被链接为相对路8.3解决手段2经过一顿操作之后发现仍然还是空白，并且打开控制台看到页面可以正常加载资源文件，但是 index.html 返回此类错误：“We're sorry

6101 0

electron套壳vue2项目

electron-forge make" …… 开发环境运行首先打开两个命令行，先在命令行1中执行 npm run dev 命令，等待vue服务器打开这里注意，要确定好本地服务器的地址，一定要与...To create a production build, run npm run build....服务器打开后，在在命令行2中执行 npm run start 命令开启应用，效果图如下所示 npm run start 生产环境打包和开发环境一样，打开两个命令行，先在命令行1中执行 npm run...很多小坑： 1.将 vue.config.js 文件里的 publicPath 字段默认值改为 ./，不然会出现打包完成后页面空白现象。...npm run build 打包完成后，在命令行2中执行 npm run make 命令，将vue打包成应用程序。

1.1K1 0

怎样为你的 Vue.js 单页应用提速

我有一个项目用了 Vue.js 来构建单页应用程序。随着上线日期的临近，性能优化的工作变得越来越重要。在本文中，我收集了有关在加载时间和渲染性能方面提高 Vue.js 应用性能的所有知识。...调用 import() 函数时，将会下载所有延迟加载的资源。对于 Vue 组件，仅在请求渲染时才发生。对话框是注定会这样的。通常仅在用户交互后才显示它们。...通过以下方式在生产模式下构建你的应用： "build": "vue-cli-service build --mode production" 并确认会生成很多块 Vue 和 Webpack 中的代码拆分...你还可以通过在浏览器中打开开发者控制台来验证此功能是否正常。...打开浏览器，然后按 F12 键打开开发者控制台。切换到 Performance 选项卡，然后单击 Start Profiling。

3.4K1 0

前端实战:electron+vue3+ts开发桌面端便签应用

包括创建一个新的electron框架也是这样，别人电脑上不会出现这个问题，猜测是electron缓存问题 vue3碰到空属性报错时无限报错，在普通浏览器（edge和chrome）是正常一次组件无法正常渲染不报错...，只在控制台报异常打包后由于electron的缓存导致打开需要10秒左右，清除c盘软件缓存后正常其他的不记得了。。...这里在防止没有数据的时候页面空白闪烁，使用一个图片和列表区域去控制显示，拿到数据之后就显示列表，否则就只显示图片。...如果勾选不在询问，那么在store=>exeConfig.state中做相应的更改这里在设置中会进行详细的介绍开发一个vue3右键弹窗插件 vue3也发布了有段时间了，虽然还没有完全稳定，但后面的时间出现的插件开发方式说不定也会多起来...插件开发思路定义好插件类型，比如需要哪些属性MenuOptions 判断是否需要在触发之后立即关闭还是继续显示在插入body时判断是否存在，否则就删除重新显示 import { createApp,

4.3K3 0

14 上线后不想让人看到源码怎么做？

在安装了Vue Devtools之后，在chrome浏览器开发模式下，打开vue面板，选择组件，然后就可以直接查看和修改data数据： ? 修改之后，视图即刻更新。...chrome://extensions/ 勾选"开发者模式" 单击 "加载已解压的扩展程序", 并且选择刚才编译的项目其目录下的shells/chrome文件夹关于 persistent 选项等如果扩展程序不能正常工作...还有，在vue.config.js中，vue$不能指向生产环境的运行时版本或是压缩的min版本。在开发者调试模式下，查看sources面板，可以看到引用的是vue.esm.js版本： ?...在sources面板中，单击暂停script按钮，有交互事情发生时，即会打开vue.esm.js文件源码。调试时为什么可以看到源码？...调试模式下，打开html页面源码查看，生成的js代码都是经过压缩的，但是在sources面板中看到的源码却是格式化的： ? 这是为什么？因为vue编译启用了source map。

1.9K3 0

Vue-cli引入lib-flexible&&ElementUI

Vue-cli引入lib-flexible&&ElementUI 2018年1月23日 18:27:19 好久不见我的小伙伴们,从毕业到参加参加工作已经三个月了,这段时间过的很有意义哈哈参加工作为了快速上手项目这两个月都是...// build/utils.js var cssLoader = { loader: ‘css-loader’, options: { minimize: process.env.NODE_ENV...修改配置后需要重启，然后我们在组件中写单位直接写 px , 设计稿多少就写多少 , 自动转rpx，美滋滋哈哈搞定后到开发者工具查看css中的px是否转换为rem来判断是否引入成功 ?...---- Vue引入饿了么ElementUI Element-ui 中文文档下面教程快速上手 npm i element-ui -S //main.js import Vue from ‘vue...---- npm run dev 后显示空白修改config/index.js 中 build对象中的assetsPublicPath: ‘/‘, 为 ‘./ ? 加油宝宝们~

1.2K4 0

vue-element-admin里面使用npm run build:prod打包步骤

= true 2：打开.env.local文件和.env.production文件同上 3：打开vue.config.js 注释掉proxy proxy代理在打包的时候需要注释，平时开发需要开着...//打包的时候需要注释 //平时开发需要开着 // proxy: { // '/api': { // target: process.env.VUE_APP_BASE_API...:prod命令进行打包后白屏的问题会出现这样的情况生成了一个静态的文件夹打开index.html的时候，会出现页面空白的问题，打开F12查看一下这是为啥，会发现这些文件的路径访问不到 ?...图片.png 解决办法需要打开routers.js文件，路由模式将histroy改成hash模式，起初 mode:'history' ?...打开vue.config.js文件打开 // hash 模式下可使用 publicPath: process.env.NODE_ENV === 'development' ?

3.5K2 0

webpack + vue 在dev和production模式下的小小区别

上周的某一天，和一位同样是前端技术极度爱好的开发者朋友聊天，他在提出了一个问题，他写的vue程序为什么在dev模式运行良好，而在production模式就直接报错了。...注意三个红框处的代码，webpack在dev模式下代码文件是没有合并成一个文件的，而是遵行commanJs规范，进行模式化加载的，而他对这个service/index.js这个模式导出时，用的名称正是a...也就是解释了在dev模式下this.a为什么会有效，他的this.a.result有值，则是因为他虽然是单文件模式化加载，但其文件中的js代码还是被bable做了转换，将箭头运算符转换为了es5可执行的代码...这就是为什么production模式下的代码不能正常运行的问题了。...在这个demo中就算把service/index.js中的this指向处理好了，但其值还是会正常显示，原因在于vue组件中的mounted方法中也用到了箭头函数，其this的指向在运行时也会不正确。

1.7K2 0

vue3+element-plus+router+vuex+axios从零开始搭建(2)

.env+vue.config.js 这一章主要环境相关配置开发环境与线上环境配置下面是vue cli 配置模式和环境变量：模式和环境变量 vue-cli 3.0x与vue-cli 2.0x最主要的区别是项目结构目录精简化...是两个特殊变量，在代码中始终可用 vue3.0 .env 文件配置全局环境变量在根目录下创建以下文件 .env 全局默认，任何环境都加载合并 .env.development 开发环境下的配置文件...有的时候你可能有一些不应该提交到代码仓库中的变量，尤其是当你的项目托管在公共仓库时。...vue.config.js配置 2.x里面webpack相关的配置项直接在项目的build/webpack.base.conf.js里面配置，而3.x完全在vue.config.js中配置创建vue.config.js...配置具体参数可以参考：配置参考这个项目主要是配置三个东西，第一个就是目录别名alias，另一个是项目启动时自动打开浏览器，最后一个就是处理css。

1.7K4 0

使用VisualStudioCode开发Vue

前言本文主要介绍在VisualStudioCode下开发Vue。 Nodejs、Npm、Vue的项目搭建参考下面文章。...Vue开发首先创建一个Vue项目——vue init webpack KibaProject。然后使用VSCode打开文件夹，打开项目。...-- built files will be auto injected --> Vue是一个单页面的项目，即他只有一个Html页面，当切换显示.vue后缀名的页面时...也就是说，在使用该组件替换Index.html中id为app的div的内容时，组件可以正常使用组件页面内定义的实体和事件函数。...新建Vue组件系统创建时，会默认创建一个HelloWorld.vue组件，但里面内容比较多，我们稍微修改一下让它简单点，代码如下：

1.3K2 0

记录一次Vue项目打包卡在dist最后一步的问题

在Vue项目开发中，项目开发完成后，打包是一个常见的操作。...今天我遇到了一个奇怪的问题，那就是在一个Vue2项目中，执行npm run build打包，等待数秒后，可以看到完整的文件被打包，但是卡在了最后一步dist目录这里。...回退vue.config.js配置文件这个文件里面写了很多webpack相关的打包配置，如果是这个配置文件出了问题，那么打包的问题很可能就是这个导致的，因为一开始打包都是正常的。...找到原因我仔细对比了下前后vue.config.js的区别，发现是我引入的一个插件导致的，插件的名称叫做code-inspector-plugin，这是一款很好用的代码定位插件，可以帮助你快速从页面元素...这里NODE_ENV写的不是production，而是test！难怪打包一直卡主不动。正常的npm run build可以，是因为环境写的是production。

8627 0

新一代构建工具的比较

这些都需要花费大量的工作，并且会使开发服务器在更大的代码库中慢慢爬行，甚至在所有的工作都用于缓存和优化之后也是如此。 Snowpack、 Vite 和 wmr 开发服务器不遵循这个模型。...url in JS bundle loader: { '.png': 'file' } // Copies to output folder 代码拆分看起来是一项正在进行的工作，但大多数情况下是以 ESM...(#production-build)Production build生产建设在 esbuild 命令中使用“ minify”和“ bundle”选项不会创建一个像 Rollup/Terser 管道那么小的...✅ (when using templates)Something (在使用模板时) Streaming imports流媒体导入 ✅ Preconfigured production build 预先配置的生产构建...✅ (when using templates)Something (在使用模板时) Streaming imports流媒体导入 ❌ Preconfigured production build 预先配置的生产构建

3.2K2 0

从零开始构建 vue3

因此，为了达到最佳效果，建议读者，一边阅读本文，一边打开终端跟着一步步动手实践。你将掌握所有构建 Vue3 所必须的知识。...6.1 scripts/dev.js 启动开发模式的代码非常简单，只有10几行代码，实际就是使用 execa 执行项目里安装(node_modules)的可执行文件。...6.2 scripts/build.js 一共70行代码，为了节省篇幅，这里只截取了主执行代码。...7. rollup.config.js 通过分析构建脚本 scripts/dev.js 和 scripts/build.js ，我们知道了，不管是开发构建还是生产构建，最终都是使用 rollup -c...翻译过来就是：lerna 是一个工作流优化工具，用于优化使用 git 和 npm 来管理在同一个 git 仓库有多个 npm 包的项目的工作流（念起来拗口，但道理很简单）。

1.9K2 0

vue-cli#2.0 webpack 配置分析

目录结构： ├── README.md ├── build │ ├── build.js │ ├── check-versions.js │ ├── dev-client.js │ ├── dev-server.js....js,.vue src" } 当我们执行 npm run dev / npm run build 时运行的的是 node build/dev-sev-server.js 或 node build/...return } var uri = 'http://localhost:' + port console.log('Listening at ' + uri + '\n') 　　// 如果不是测试环境，自动打开浏览器并跳到我们的开发地址...= (env === 'development' && config.dev.cssSourceMap) 　　　　// 是否在production 环境下开启 ssSourceMap 在config/...index.js 中可配置 var cssSourceMapProd = (env === 'production' && config.build.productionSourceMap) 　　　　/

1.8K5 0

三分钟使用webpack-dev-sever搭建一个服务器

”命令安装，因为我们在发布后用不到它，而只是在我们开发才用到它。...另外需要补充的是：正常使用npm install时，会下载dependencies和devDependencies中的模块，当使用npm install –production或者注明NODE_ENV...变量值为production时，只会下载dependencies中的模块。...bundle.js的,它其实存在了内存中,想看编译后的代码可以去build下找 ok 其实现在我们可以运行webpack-dev-sever,他已经可以正常工作了,但是每次都这么敲命令很麻烦,所以为们在package.json

1.3K8 0

开发字节抖音小程序踩坑记

web-view来展示pdf文件，在ios和开发工具里都没问题，但在安卓手机上页面打开成功一直显示空白，解决方案先用 uni.downloadFile 下载下来文件，在通过 uni.openDocument...打开文档，但是安卓真机上打开依然只显示一个pdf文件名，需要自己再点一下通过wps之类的其他第三方应用打开三、子组件传递事件$emit里的事件名不能加“-”子组件像父组件传递事件时，事件名里加了横杠“...才会压缩代码，有时我们开发、测试环境也需要真机上预览，如果不压缩代码有时会提示包超除大小限制（一般主包限制2M）解决方案：通过默认的 NODE_ENV 命令行变量去让打包生产模式，自己再额外加一个VUE_APP_ENV...变量来判断接口地址，如下面这样的命令： "build:mp-toutiao-dev": "cross-env VUE_APP_ENV=development NODE_ENV=production UNI_PLATFORM...=mp-toutiao vue-cli-service uni-build --minimize --watch"九、获取用户手机号授权需提前申请抖音小程序获取用户手机号的api需要企业主体，而且要先申请审核通过了才可以用

1K3 0

用 vite 2 平滑升级 vue 2 + webpack 项目实战

Webpack 指标对比经过实际运行，在同一项目中、采用几乎相同的设置，结果如下：指标 \ 工具 Vite Vite(legecy) Vue-cli + Webpack npm run debug...kb) 175 174 88 总 JS 文件体积 (kb) 3864 7832 4080 开发环节区别 webpack: 先转译打包，然后启动 dev server 热更新时，把改动过模块的相关依赖模块全部编译一次...production", "preview": "vite preview --port 8082", 复制代码之前的 webpack 命令加前缀（如："webpack:build"），继续可用 node-sass...-> 基础配置复用并完善了之前的打包和开发配置文件： // build/config.js module.exports = { title: '报表', // 打包文件夹名称.../src/utils/env.js', () => { return { getEnvMode: () => 'production' }; }); 复制代码 require.ensure

1.9K7 0

点击加载更多

vue-cli 解决白屏、兼容、压缩及清除console

Vue 脚手架项目分析

Vue+ElementUI 搭建后台管理系统（实战系列八）

IM跨平台技术学习(十一)：环信基于Electron打包Web IM桌面端的技术实践

electron套壳vue2项目

怎样为你的 Vue.js 单页应用提速

前端实战:electron+vue3+ts开发桌面端便签应用

14 上线后不想让人看到源码怎么做？

Vue-cli引入lib-flexible&&ElementUI

vue-element-admin里面使用npm run build:prod打包步骤

webpack + vue 在dev和production模式下的小小区别

vue3+element-plus+router+vuex+axios从零开始搭建(2)

使用VisualStudioCode开发Vue

记录一次Vue项目打包卡在dist最后一步的问题

新一代构建工具的比较

从零开始构建 vue3

vue-cli#2.0 webpack 配置分析

三分钟使用webpack-dev-sever搭建一个服务器

开发字节抖音小程序踩坑记

用 vite 2 平滑升级 vue 2 + webpack 项目实战

相关资讯

热门标签

活动推荐

运营活动

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐