vue打包后dist的使用

vue项目打包总结(babel安装问题、打包后直接访问dist文件夹、elementui样式失效等) 官方文档有简单的方法: npm install -g serve(全局安装) serve -s dist(运行打包后的文件) 阅读详情

发现问题

vue项目完成打包出dist后准备打开index.html,发现居然页面是一片空白,f12一片报红。

分析问题

经过多次网上查询后发现这是由于vue打包时,脚手架会帮你配置好大量参数,但其中路径publicPath被配置为了"/",需要手动修改。

解决办法

1、将vue.config.js中的publicPath:"/“修改为publicPath:”./"
请添加图片描述
2、删除之前的dist重新打包。

结语

再次打包后打开dist中的index.html,发现页面出来了,但是如果页面有路由跳转的话,会发现跳转失败,
这时需要修改router中的路由模式为hash:
在router的index.js中修改:从vue-router中引入createWebHashHistory,将createWebHistory(process.env.BASE_URL)改为createWebHashHistory(process.env.BASE_URL)。
请添加图片描述
最后重新打包即可。

vue项目打包发布与dist瘦身 vue项目打包发布dist瘦身 阅读详情

相关推荐

本地测试vue-cli打包后的dist文件

此方法可以自己本地写接口,自己打包vue-cli,然后测试打包后的文件是否正确。 1.本地获取自己写到的node.js接口 可能会遇到跨域的问题,可以看我的博客跨域问题 1.1.在vue页面中引入自己node.js写的接口(关于node.js的教程可以看我以前的博客) <template> <div class="hello"> <h1&g...

小毛驴的博客 1万+

Vue项目的打包方式(生成dist文件)

打包vue项目,生成dist文件夹。

商务合作 | 共同学习 | 携手共进 18万+

已经打包好了的vue dist文件夹,如何用electron打包成exe桌面应用

在非dist文件夹(注意,是非dist文件夹,就是原本没打包的项目文件里)的package.json文件里,改一下script。先在项目根目录下(非dist根目录)安装electron electron-packager。最后在项目文件根目录(非dist文件夹目录)里执行electron_build,完成打包。再在项目根目录下(非dist根目录)安装electron-packager。然后在dist文件夹下创建main.js文件,内容为。再创建一个文件package.json。

sensendedede的博客 2228

webpack打包vue项目之后生成的dist文件该怎么启动运行

亲测,webpack打包vue项目之后生成的dist文件可以部署到 express 服务器上运行。我的vue项目结构如下:1. 进入该vue项目目录,打开git bash,执行:npm run build(在package.json的scripts配置)执行成功如下图所示:然后此时你会发现项目下多了一个 dist 文件夹,dist下文件便是项目打包之后生成的文件。此时我们直接在浏览器中打开inde...

u014054437的博客 10万+

golang整合vue打包文件dist静态资源 打包进exe

golang整合vue打包文件dist静态文件 打包进exe1.需求描述2.下载工具3.dist文件打包4.golang中配置5.打包6.启动测试 1.需求描述 golang语言开发十分方便, 简洁,能够快速搭建一个webApi,前期工作很小,vue是最新流行起来的前端开发框架,所带来的方便是有目共睹的,目前已经成为了市面上主流的前端开发框架之一。 vue项目在部署的时候需要打包,打包之后生成一个dist文件夹,里面的静态文件放入到指定的后端代码中就可以与后端代码一起部署了。 之前做过java的spring

RanGe的博客 3414

手把手教你如何Vue项目打包dist文件并Tomcat发布【超级详细】

零基础带你入门Vue项目打包部署到Linux服务器,一条龙服务,只为不远千里把你教会。

**My Coding Family** 1万+

如何运行webpack打包的vue项目之后的dist文件

1、打包vue项目:npm run build会生成一个dist文件 express是一个基于node.js平台的web开发框架 2、安装express、express-generator npm install express -g npm i express-generator -g 3、创建expressDemo项目 express exp...

qq_35165469的博客 3293

巨量千川M-API实战:异步报表与批量操作自动化指南

API(应用程序编程接口)是现代软件系统间通信和数据交换的核心技术,它定义了服务间交互的协议和规范。在数字营销领域,营销API(Marketing API)通过程序化接口实现了广告账户管理、数据获取和操作自动化的能力,其技术价值在于将重复性人工操作转化为高效、准确的自动化流程,显著提升运营效率并降低人为错误。在广告投放精细化运营场景中,面对海量数据报表的获取与批量广告状态管理的需求,异步任务处理和批量操作接口成为关键技术解决方案。本文聚焦巨量千川M-API,深入解析其异步报表获取机制与批量操作实现,涵盖从任

weixin_32932149的博客 429

vue 打包成dist之后怎么部署

vue 打包成dist之后怎么部署将Vue项目打包成dist目录后,有多种方式可以部署你的项目。

逐影随行的博客 1303

window下移动设备/硬盘报错位置不可用

移动硬盘指示灯亮,但电脑上不显示 报错信息 : 无法访问E:\。参数错误。 报错原因: 移动硬盘打不开提示参数错误,是因为这个H盘的文件系统内部结构损坏导致的。要怎么恢复里面的数据呢? https://jingyan.baidu.com/article/cb5d6105a80242005c2fe0c3.html 解决办法 : 不用格式化修复方法 方法一: 1、单击–开始–运行–输入cmd; 2、...

qq_40907977的博客 4928

零基础入门simulink建模仿真--基于Simulink的QPSK调制与解调仿真建模示例

QPSK是一种相位调制技术,将两个比特映射到一个符号上,每个符号对应四个可能的相位之一(0°、90°、180°、270°)。通过Simulink,我们可以通过模块化的建模方式实现QPSK的调制和解调过程,并观察信号在信道中的传输效果。通过本指南,我们介绍了如何基于Simulink搭建一个完整的QPSK调制与解调仿真模型,并进行仿真和性能评估。背景介绍:理解QPSK调制与解调的基本原理及其应用。所需工具和环境:列出进行QPSK仿真所需的工具和环境。步骤详解。

amy_mhd的博客 1309

vue打包优化dist

好好学习 ,天天向上。Are you ready? VUE打包后文件太大解决方法 首先了解是哪个文件过大,这里推荐文件可视化插件 npm install webpack-bundle-analyzer -S -D 在vue.config.js中设置 module.exports = { chainWebpack: config => { config.resolve.alias.set('@', resolve('src')) config.plugin('webpack-bu

LennieGao的博客 2030

基于Simscape的双PID比例调速阀与比例溢流阀液压控制系统建模与仿真

本文提出了一种基于Simscape的双PID液压控制系统建模方法,通过比例调速阀和比例溢流阀实现液压缸速度与压力的解耦控制。系统采用Simscape Fluids物理建模,精确模拟液压元件非线性特性。文章详细介绍了液压被控对象建模过程,包括动力单元、比例阀组合建模、执行机构及传感器配置。同时设计了双PID控制器架构,分别控制速度环和压力环,并给出参数整定建议。该方法通过物理网络直接模拟流体流动和压力动态,相比传统传递函数法具有更高精度,为液压系统仿真提供了有效解决方案。

AI的内部世界的博客 284

如何运行vue打包之后的dist文件

介绍一种使用Node.js中的http-server模块搭建本地服务器的方法:1.确认已经安装了Node.js;2.安装http-server模块;3.进入到dist目录;4.启动http-server;5.输入网址,访问项目文件。

CLOUDS06的博客 1万+

学习QT之应用程序打包发布

一、编译QT程序(release编译) 二、将release文件夹中的可执行文件复制到一个空的文件夹中 三、使用windeployqt打包工程 切换到可执行文件路径,执行windeployqt xxx.exe: 然后就会将程序所需要用到的资源以及库文件生成到可执行文件路径下: 此时应用程序就可以点击运行了。 四、使用Enigma Virtual Box封包(将文件夹内的文件集成为单可执...

贝勒里恩的博客 762

使用OpenGL加载和显示DXF格式的3D模型文件编程

这样,我们就完成了使用OpenGL加载和显示DXF格式的3D模型文件的编程。通过实现加载函数和绘制回调函数,我们能够读取DXF文件的数据并使用OpenGL绘制出来。请注意,这只是一个简单的例子,仅涵盖了基本的加载和显示功能。在本文中,我们将探讨如何使用OpenGL编程加载和显示DXF(Drawing Exchange Format)格式的3D模型文件。DXF是一种通用的CAD(计算机辅助设计)文件格式,常用于存储和交换2D和3D图形数据。使用OpenGL加载和显示DXF格式的3D模型文件编程。

2301_79331421的博客 413

vue3打包dist为空白

语法不符合 TypeScript 预期),可能是依赖版本不兼容或类型定义有问题。类型定义文件里有语法错误(TS1005: '?' expected ,即。安装可能解决dist打包文件夹为空的问题。

2501_90179722的博客 218

【DRAM存储器五十五】LPDDR5介绍--command bus training

本文详细介绍了LPDDR5命令总线训练(CBT)的两种模式操作流程。在启用ODT进行高频/中频操作前,必须对命令总线进行训练,包括调整VREF(CA)电压和CA/CS信号时序。两种模式的主要区别在于VREF(CA)设置方式:模式1通过MR12直接设置,模式2通过DMI[0]引脚捕获DQ[6:0]数据更新MR12。训练流程涉及频率切换、模式寄存器配置、pattern发送及结果采样等步骤,最终确定最佳VREF(CA)和时序参数。文章还分析了不同PHY实现可能存在的差异,如训练pattern生成方式和采样次数等。

highman110的博客 648

vue项目打包后dist部署到Nginx

本文详细介绍了将Vue项目部署到Nginx服务器的完整流程。主要内容包括:1)下载安装Nginx并配置nginx.conf文件,重点说明前端路由处理、静态资源缓存和API代理设置;2)打包Vue项目并复制dist目录到指定位置;3)启动Nginx服务及验证部署的步骤;4)提供常见问题解决方案(如端口占用、配置检查等)和Nginx管理命令(启动/停止/重载)。文档还包含完整的配置示例,特别强调了SPA路由兼容处理和API代理配置优化。

ymqzhy的博客 1115

rk3588 LightSensor适配从驱动到应用层

本文详细介绍了在RK3588平台上实现光感驱动的开发流程。主要包括:1) 在设备树中配置I2C5接口挂载光感设备;2) 编写内核驱动代码实现光感数据采集;3) HAL层通过ioctl与驱动交互;4) 在BoardConfig.mk中启用相关宏定义;5) Framework层通过AutomaticBrightnessController实现自动亮度调节算法;6) 应用层可通过监听系统设置获取光感变化并调整屏幕亮度。整个流程涵盖了从底层驱动到上层应用的完整实现方案,重点解决了光感设备注册、数据采集传输和自动亮度

tzj1058756809的博客 449

深度学习工具包 DeepLearningToolbox

深度学习工具包Deprecation notice.-----This toolbox is outdated and no longer maintained.There are much better tools available for deep learning than this toolbox, e.g. [Theano](http://deeplearning.net/software/theano/), [torch](http://torch.ch/) or [tensorflow](http://www.tensorflow.org/)I would suggest you use one of the tools mentioned above rather than use this toolbox.Best, Rasmus.DeepLearnToolbox================A Matlab toolbox for Deep Learning.Deep Learning is a new subfield of machine learning that focuses on learning deep hierarchical models of data.It is inspired by the human brain's apparent deep (layered, hierarchical) architecture.A good overview of the theory of Deep Learning theory is[Learning Deep Architectures for AI](http://www.iro.umontreal.ca/~bengioy/papers/ftml_book.pdf)For a more informal introduction, see the following videos by Geoffrey Hinton and Andrew Ng.* [The Next Generation of Neural Networks](http://www.youtube.com/watch?v=AyzOUbkUf3M) (Hinton, 2007)* [Recent Developments in Deep Learning](http://www.youtube.com/watch?v=VdIURAu1-aU) (Hinton, 2010)* [Unsupervised Feature Learning and Deep Learning](http://www.youtube.com/watch?v=ZmNOAtZIgIk) (Ng, 2011)If you use this toolbox in your research please cite [Prediction as a candidate for learning deep hierarchical models of data](http://www2.imm.dtu.dk/pubdb/views/publication_details.php?id=6284)```@MASTERSTHESIS\{IMM2012-06284, author = "R. B. Palm", title = "Prediction as a candidate for learning deep hierarchical models of data", year = "2012",}```Contact: rasmusbergpalm at gmail dot comDirectories included in the toolbox-----------------------------------`NN/` - A library for Feedforward Backpropagation Neural Networks`CNN/` - A library for Convolutional Neural Networks`DBN/` - A library for Deep Belief Networks`SAE/` - A library for Stacked Auto-Encoders`CAE/` - A library for Convolutional Auto-Encoders`util/` - Utility functions used by the libraries`data/` - Data used by the examples`tests/` - unit tests to verify toolbox is workingFor references on each library check REFS.mdSetup-----1. Download.2. addpath(genpath('DeepLearnToolbox'));Example: Deep Belief Network---------------------```matlabfunction test_example_DBNload mnist_uint8;train_x = double(train_x) / 255;test_x = double(test_x) / 255;train_y = double(train_y);test_y = double(test_y);%% ex1 train a 100 hidden unit RBM and visualize its weightsrand('state',0)dbn.sizes = [100];opts.numepochs = 1;opts.batchsize = 100;opts.momentum = 0;opts.alpha = 1;dbn = dbnsetup(dbn, train_x, opts);dbn = dbntrain(dbn, train_x, opts);figure; visualize(dbn.rbm{1}.W'); % Visualize the RBM weights%% ex2 train a 100-100 hidden unit DBN and use its weights to initialize a NNrand('state',0)%train dbndbn.sizes = [100 100];opts.numepochs = 1;opts.batchsize = 100;opts.momentum = 0;opts.alpha = 1;dbn = dbnsetup(dbn, train_x, opts);dbn = dbntrain(dbn, train_x, opts);%unfold dbn to nnnn = dbnunfoldtonn(dbn, 10);nn.activation_function = 'sigm';%train nnopts.numepochs = 1;opts.batchsize = 100;nn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.10, 'Too big error');```Example: Stacked Auto-Encoders---------------------```matlabfunction test_example_SAEload mnist_uint8;train_x = double(train_x)/255;test_x = double(test_x)/255;train_y = double(train_y);test_y = double(test_y);%% ex1 train a 100 hidden unit SDAE and use it to initialize a FFNN% Setup and train a stacked denoising autoencoder (SDAE)rand('state',0)sae = saesetup([784 100]);sae.ae{1}.activation_function = 'sigm';sae.ae{1}.learningRate = 1;sae.ae{1}.inputZeroMaskedFraction = 0.5;opts.numepochs = 1;opts.batchsize = 100;sae = saetrain(sae, train_x, opts);visualize(sae.ae{1}.W{1}(:,2:end)')% Use the SDAE to initialize a FFNNnn = nnsetup([784 100 10]);nn.activation_function = 'sigm';nn.learningRate = 1;nn.W{1} = sae.ae{1}.W{1};% Train the FFNNopts.numepochs = 1;opts.batchsize = 100;nn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.16, 'Too big error');```Example: Convolutional Neural Nets---------------------```matlabfunction test_example_CNNload mnist_uint8;train_x = double(reshape(train_x',28,28,60000))/255;test_x = double(reshape(test_x',28,28,10000))/255;train_y = double(train_y');test_y = double(test_y');%% ex1 Train a 6c-2s-12c-2s Convolutional neural network %will run 1 epoch in about 200 second and get around 11% error. %With 100 epochs you'll get around 1.2% errorrand('state',0)cnn.layers = { struct('type', 'i') %input layer struct('type', 'c', 'outputmaps', 6, 'kernelsize', 5) %convolution layer struct('type', 's', 'scale', 2) %sub sampling layer struct('type', 'c', 'outputmaps', 12, 'kernelsize', 5) %convolution layer struct('type', 's', 'scale', 2) %subsampling layer};cnn = cnnsetup(cnn, train_x, train_y);opts.alpha = 1;opts.batchsize = 50;opts.numepochs = 1;cnn = cnntrain(cnn, train_x, train_y, opts);[er, bad] = cnntest(cnn, test_x, test_y);%plot mean squared errorfigure; plot(cnn.rL);assert(er<0.12, 'Too big error');```Example: Neural Networks---------------------```matlabfunction test_example_NNload mnist_uint8;train_x = double(train_x) / 255;test_x = double(test_x) / 255;train_y = double(train_y);test_y = double(test_y);% normalize[train_x, mu, sigma] = zscore(train_x);test_x = normalize(test_x, mu, sigma);%% ex1 vanilla neural netrand('state',0)nn = nnsetup([784 100 10]);opts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samples[nn, L] = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.08, 'Too big error');%% ex2 neural net with L2 weight decayrand('state',0)nn = nnsetup([784 100 10]);nn.weightPenaltyL2 = 1e-4; % L2 weight decayopts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samplesnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');%% ex3 neural net with dropoutrand('state',0)nn = nnsetup([784 100 10]);nn.dropoutFraction = 0.5; % Dropout fraction opts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samplesnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');%% ex4 neural net with sigmoid activation functionrand('state',0)nn = nnsetup([784 100 10]);nn.activation_function = 'sigm'; % Sigmoid activation functionnn.learningRate = 1; % Sigm require a lower learning rateopts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samplesnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');%% ex5 plotting functionalityrand('state',0)nn = nnsetup([784 20 10]);opts.numepochs = 5; % Number of full sweeps through datann.output = 'softmax'; % use softmax outputopts.batchsize = 1000; % Take a mean gradient step over this many samplesopts.plot = 1; % enable plottingnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');%% ex6 neural net with sigmoid activation and plotting of validation and training error% split training data into training and validation datavx = train_x(1:10000,:);tx = train_x(10001:end,:);vy = train_y(1:10000,:);ty = train_y(10001:end,:);rand('state',0)nn = nnsetup([784 20 10]); nn.output = 'softmax'; % use softmax outputopts.numepochs = 5; % Number of full sweeps through dataopts.batchsize = 1000; % Take a mean gradient step over this many samplesopts.plot = 1; % enable plottingnn = nntrain(nn, tx, ty, opts, vx, vy); % nntrain takes validation set as last two arguments (optionally)[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');```[![Bitdeli Badge](https://d2weczhvl823v0.cloudfront.net/rasmusbergpalm/deeplearntoolbox/trend.png)](https://bitdeli.com/free "Bitdeli Badge")

node+express启动vue打包后的dist文件

启动vue打包后的dist文件 当我们前端使用vue框架打包成dist文件时,想预览测试时,又不想上传服务器,可以在本地创建node服务器,使用非常简单. 一、创建一个文件夹(英文名称) 小编创建的是server-app cd server-app npm init 二、使用express模块 这一步需要下载一个node_modules包 npm install express 三、手动创建app.js入口文件 小编创建的是app.js,随便啊!!! //使用express构建web服务器 --11:2

yaorui_123456的博客 4623

Data-Structures-and-Algorithm-Analysis-in-Java.pdf

作者: Weiss, Mark A. 出版社: Addison Wesley Data Structures and Algorithm Analysis in Java is an “advanced algorithms” book that fits between traditional CS2 and Algorithms Analysis courses. In the old ACM Curriculum Guidelines, this course was known as CS7. This text is for readers who want to learn good programming and algorithm analysis skills simultaneously so that they can develop such programs with the maximum amo...

vue配置生成打包文件dist

Vue项目的打包方式(生成dist文件)_m0_54850604的博客-优快云博客_vue项目打包成dist

weixin_53571730的博客 804

TMS_WebGMaps_1.9.8.0_Full_Source

TMS_WebGMaps_1.9.8.0_Full_Source 全源码 delphi cbuilder

C# WinForm 基于DirectShow.dll编写的程序,可边预览边保存视频,音频和图片

基于微软的DirectShow.dll的二次开发1.自动识别连接的摄像头跟麦克风且可以对其进行选择(默认选中第一个)2.可录制wmv和avi两种格式的视频并且都带有音频,avi可以录制的分辨率和帧数进行选择,wmv默认进行了淸晰度优化如不喜欢可去除代码中有相关提示3.可在预览点开之后进行拍照,也可边录制视频边拍照4.添加了视频和音频的压缩功能(酌情使用)这次二次开发发现C#对DirectShow的相关信息太少,这次做完也不敢藏私共享出来,还望大家指正

vue项目npm run build打包dist文件及打包后空白的解决方法

要想将vue的移动端项目打包成手机的app软件apk格式,首先要将项目打包出dist文件。若空白查看一下配置,可能是配置有错误,(本人用的情况一配置空白,换成了情况二的配置,成功解决!!)

qq_52126119的博客 1万+

vue打包 dist 文件预览自测

vue vue3 打包 dist serve

So.九天 980
上一篇: 解决使用filter: blur时图片四周泛白的问题
下一篇: electron-builder打包配置说明
xi1213
博客等级 码龄7年 310粉丝 51原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明:

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

余额充值