vue前端打包怎么不放服务器就可以打开

2024-09-03

vue打包后不使用服务器直接访问方法

根据官网打包执行npm run build 后dist文件夹打开的index.html 是空白需要开启http服务器才能访问,以下是解决办法 1.找到config文件夹下的index文件修改成 2.找到build文件夹下的until文件修改成然后执行npm run build重新打包下就ok了

vue项目在开发环境下,让项目运行起来,是通过npm run dev命令,原理是在本地搭建了一个express服务器. 但是在服务器上就不是这样的,必须要通npm run build命令来对整个项目进行打包,打包后会在项目目录下生成一个dist文件夹,内容如下: 然后就是把这些文件丢到服务器上的某个文件夹下,我这里的文件夹名字是ibms 遇到的问题: 1. 直接去访问http://www.xxx.com/ibms/,会发现网页是白屏的,什么都没有,这就比较奇怪了,其实是因为资源加载的路径有问题!

vue项目打包部署到nginx 服务器上

假如要实现的效果如下 http://ip/vue =>是进入首页访问的路径是 usr/local/nginx/html/vue http://ip/website =>是进入首页访问的路径是 usr/local/nginx/html/avue 2.打包前在相应的没打包文件中加入如下 vue目录下的文件没打包前的路由 index.js文件中加 export default new Router({ mode: 'history', base:"/vue" /

Django项目vue前端依赖框架过大，工程打开太卡的问题

前景提要:利用vue开发项目,由于依赖框架太大,导致pyCharm内存不够,项目打开太慢.步骤一:修改pyCharm的占用内存大小,按照下图操作.1.在应用程序中找到pyCharm,点击"显示包内容": 2.在-/contents/bin中选中.vmoptions文件,并打开: 3.改变如下图所示的两个值:Xms最小值,Xmx最大值: 修改完之后,需要重新打开pyCharm. 步骤二.设置程序打开时不加载依赖包. ps:一般第一次打开程序时会耗时比较多,按照上面的设置好之后,以后再打开

vue中打包之后的dist文件不放在服务器的根目录下

在工作当中,我使用webpack打包的dist,由于管理的问题,无法被放在服务器根目录下 ,但在目前的vue配置,dist不放在根目录下,访问页面会成为一片空白,于是便要对vue框架的config进行配置修改. 首先对vue中config文件夹的index.js做配置,将build.assetsPublicPath由绝对路径改为相对路径 build: { // Template for index.html index: path.resolve(__dirname, '../dist/inde

vue+ elementUI 打包发布到服务器后，element-icons.woff文件404

vue项目打包部署到服务器,静态资源文件404 js文件404问题原因:打包的项目静态资源的路径需要设置为绝对路径.如果是相对路径会出错解决办法:修改config/index.js文件,将 assetsPublicPath修改为'./' element-icons.woff 文件 404 1.从下图可以看到,使用url-loader处理后的文件是在static目录下生成fonts目录下的文件.全部样式文件打包在css目录下app.****

vue项目怎么搭建到云服务器上

链接1:https://blog.csdn.net/qq_37741554/article/details/87560823 linux下载安装node.js 链接2:https://blog.csdn.net/qq_30591163/article/details/82458846 linux环境nginx部署vue项目 1,首先,将vue项目打包(打包文件为dist,里面放着打包好的css,js,index.html文件),打包前先把IP地址改好(port改了其实没用,访问端口号是看ngin

cordova+vue 项目打包成Android（apk）应用

现在使用vue开发的项目越来越多,使用vue开发的移动端打包就成了最大的问题.现在前端打包方案有好多种,但是综合来说,我比较喜欢用cordova来进行Android和ios的打包,配置完成之后,每次只需要一条命令就可以完成打包. 1.安装cordova这一步的前提是已经完成安装node和npm,如果没有安装的话,请先完成node和npm的安装.node安装:直接进入官网https://nodejs.org/zh-cn/,下载最新版本安装.安装之后在命令行中使用"node -v" 检查安

vue 前端框架 (三)

VUE 生命周期 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script type="text/javascript" src="js/vue.js"></script> <link rel="stylesheet" type=&

【转】vue项目打包部署——nginx代理访问

我又来了,今天部署了下vue项目,使用nginx做了代理,这样可以解决跨域的问题,这里做一个简单讲解. 1.先看vue项目打包(我这里使用的是vscode开发工具) 这里是我的项目结构: 打包之前需要修改如下配置文件: 配置文件一:build>>utils.js (修改publicPath:"../../" , 这样写是处理打包后找不到静态文件的问题) 配置文件二:config>>index.js(修改assetsPublicPath:'./' ,修改目的是为了

基于vue+springboot+docker网站搭建【五】部署vue前端项目

部署vue前端项目一.下载项目到本地 https://github.com/macrozheng/mall-admin-web 二.npm install 三.修改api配置,改为你接下来要部署的后台项目的ip:port 四.编译打包五.部署蒋dist文件夹压缩成 dist.tar.gz 安装远程复制工具 yum -y install lrzsz 进入nginx文件夹:cd mydata/nginx/ 执行拷贝命令将本地dist文件拷贝到 nginx文件夹下:rz 解压:tar -z

Vue 前端配置多级目录实践（基于Nginx配置方式）

前情提要有阵子没更新博客了,因为快年结了工作比较多,这不,最近公司的对外演示环境出现问题这个活儿也落到了我的头上-- 事情是这样的,原来演示环境有很多服务,每个服务都是对外单独开一个端口,比如 http://a.com.cn:8080.http://a.com.cn:8081 这种,通过外网域名端口映射到内网的服务器上.最近有个变化是为了降低安全风险,公司决定启用https,并且对外演示环境只开设一个端口. 之前的样子: 现在想要的效果: 看着应该会很好实现,只需要用个Nginx就可以了嘛~

docker Compose 部署springboot+vue前端端分离项目

温馨提示:如果有自己的服务器最好不过了,这样部署网项目就可以上线了.没有的话,只能使用localhost 本机访问啦,记得替换 ngixn 中的ip地址.域名为localhost. (一) 准备工作一.安装 1.安装Docker并配置阿里云仓库加速 ① 环境查看,选择对应的docker的安装版本: docker 帮助文档:https://docs.docker.com/get-started/overview/ # 先查看发行版 cat /etc/os-release # 若是redhat,查

svn迁移gitlab，构建前端打包发布流程

前端资源迁移目前公司的前端资源托管在svn服务器上,由于团队的逐渐扩大,svn的分支管控越来越不灵活,而且对于以后前端流程一体化的处理支持不是很好,因此决定在版本控制上转向git.git的好处不用多说:多分支并行开发,自动化构建,持续集成等等,这也是促使我们转向它的原因. 具体操作中的问题首先尝试使用gitlab提供的web hooks进行触发脚本控制.web hooks发出的post请求我们的php文件,在php中执行相关shell脚本,完成一体化构建.但是shell中的提

vue中打包生成可配置文件以便修改接口地址

vue打包上传到服务器之后,如果数据接口域名发生变化,需要手动修改接口地址,在发布的时候也麻烦,于是.. 在打包之后如果有一个json配置文件以便修改那不是方便很多在网上找了一些方法貌似都是异步请求json文件,试过之后发现了问题:这个实际是需要在其他后端接口请求之前就返回接口地址.然后再进行其他一系列如登陆,获取用户信息等接口请求. 其实是需要同步操作的,在这个完成成功之后再进行其他一系列操作才对,于是乎,就想要不要试试promise等方法把异步变同步来进行操作?but,由于之前已经封装好了

自定义Vue组件打包、发布到npm以及使用

本文将帮助:将自己写的Vue组件打包到npm进行代码托管,以及正常发布之后如何使用自己的组件. 本文讲述的仅仅是最基础的实现,其他复杂的操作需要非常熟悉webpack的相关知识,作者将继续学习. 先附上大佬的文献:https://blog.csdn.net/qq_40513881/article/details/82494958 按照大佬文中写的一步步操作,够细心的话基本可以一步到位.下面总结一下发布步骤: 1. 利用Vue的脚手架新建一个简易版的Vue项目my-project: vue ini

VSCode前端文件（html文件）如何以服务器模式打开？

方法1: VSCode前端文件(html文件)如何以服务器模式打开?比如工程下有一个A.html文件,想在VSCode里面直接操作,就想Webstorm一样,以http://localhost/xxx/xx/xx/A.html这样的形式在浏览器中访问.发现只有一个 View In Browser 插件,但是并不是这样的形式,求大神解答? npm install http-server -g 在项目目录打开终端输入 hs 就可以启动web服务器了,很简洁方法2: VScode安装Live Ser

vue前端项目优化策略

vue前端项目有什么优化策略? .生成打包报告.(可以发现一些问题,并进行解决)2.使用第三方库启用CDN加载3.使用Element-ui的话,按需加载组件4.使用路由懒加载生成打包报告: .生成打包报告后可以看到哪些问题呢?可以看到整个项目依赖大小,项目访问速度,从而进行优化那怎么优化项目呢? 到整个项目依赖大小,项目访问速度,从而进行优化到整个项目依赖大小,项目访问速度,从而进行优化到整个项目依赖大小,项目访问速度,从而进行优化

vue+hbuilder 打包成移动app

查看了很多网上写的改来改去都在手机上运行不起来,运行起来又是白屏:最后放弃,自己结合文档搞吧! 1. 项目目录下的config文件夹里的index.js文件中,将build对象下的assetsPublicPath中的“/”,改为“./”后,打包生成的 dist 文件. 注释:config文件夹里的index.js中有两个assetsPublicPath,记住是改 build对象下的 assetsPublicPath 完了之后,打包, 执行npm run build之后生成dist文件夹 2. 在

Vue build打包之后，刷新页面出现404解决方案

Vue build打包之后,刷新页面出现404,HTML5 History 模式原因分析: vue-router 默认 hash 模式 —— 使用 URL 的 hash 来模拟一个完整的 URL,于是当 URL 改变时,页面不会重新加载. 如果不想要很丑的 hash,我们可以用路由的 history 模式,这种模式充分利用 history.pushState API 来完成 URL 跳转而无须重新加载页面. const router = new VueRouter({ mode: 'histo

手把手教你如何构建Vue前端组件库

在前端开发中可能会遇到将相同的功能模板集合成一个组件,供他人调用,这样可以减少重复造轮子,也可以节约人力.财力,更能够提高代码的可维护度:下面将通过详细的步骤教你如何构建一个Vue前端组件. 1.在本机上安装好NodeJs,并配置好环境变量 (1)NodeJs的下载地址:点击进入下载页面我这里是下载64位Windows安装包(.msi),大家可以根据自己电脑系统选择相应的版本即可. (2)下载NodeJs后双击它,采用默认设置,一直点击下一步,直到Finish为止.需要说明的是,在安装Node