vue项目打包后本地index运行

最新推荐文章于 2024-08-23 16:57:19 发布
最新推荐文章于 2024-08-23 16:57:19 发布
阅读量639 收藏
点赞数
分类专栏： 前端 文章标签： vue.js javascript 前端
原文链接：https://blog.csdn.net/YYYYYun/article/details/101024012
版权
本文探讨了如何解决Vue CLI项目打包后本地运行时图标无法显示的问题，重点在于`config/index.js`中`assetsPublicPath`配置的调整，并提到了在`build/utils.js`中必要的更改，如添加publicPath属性以确保资源路径正确加载。
摘要由CSDN通过智能技术生成

vue-cli项目打包后直接在本机运行，config/index.js 中修改代码

build: {

    // Paths
    assetsRoot: path.resolve(__dirname, '../dist'),
    assetsSubDirectory: 'static',
    //加了一个小点
    assetsPublicPath: './',
  }
 

打包后图标不能用？
build / utils.js 中 return ExtractTextPlugin.extract 返回值中 添加 publicPath: '../../'

CopperDong
关注
专栏目录
Vue中index.html、main.js、App.vue、index.js之前的关系及加载过程
wangshiqi666的博客
03-26 4252
Vue项目结构
vue项目打包后在本地运行
墨灬笙的博客
08-24 5164
vue项目打包后在本地运行 首先运行命令npm run build。运行成功后vue项目中会生成一个dist文件夹。怎样将这个文件夹在本地运行呢？需要如下几个步骤： 1、cd 到dist文件夹中，运行http-server这个命令； 如果出现下面这个错误： 就找到C盘下C:\Windows\System32\WindowsPowerShell的powershell.exe这个文件并用管理员方式进行运行，点开后输入命令 set-ExecutionPolicy RemoteSigned, 之后在项目终端中运行n
vue文件打包后怎么运行
最新发布
m0_74358570的博客
08-23 274
vue打包、vue打包后在本地运行
Vue项目打包后在本地运行的两种方法：express本地服务器和nginx本地服务器
m0_46627730的博客
11-24 1333
一：下载安装nginx 官网下载nginx 目前我装的是1.8.1版本的： 二：修改conf文件夹下的nginx.conf文件 注：我这里的D:\localDists\dist是我Vue项目打包后的dist文件 三：双击nginx.exe，并打开浏览器对应的地址查看效果 双击时会出现一闪而过的黑窗口： 我之前在nginx.conf文件中，修改端口为8088，所以相应的地址就是：http://localhost:8088/ 浏览器输入http://localhost:8088/： ...
vue项目怎么在本地跑起来打包之后的dist文件中的index.html
肖肖肖丽珠的博客
01-14 710
我想直接打开打包后的文件，让它运行。但是不用命令行。 需要修改vue.config.js 把publicPath:'/'改成publicPath:'./' 然后再去执行npm run build 。生成了dist文件之后。直接点击index.html看效果就行啦 ...
vue打包本地启动方案
qq_28875189的博客
05-23 885
在本地启动Vue打包的方案有很多种。
vue调用顺序(初学版) index.html → main.js → app.vue → index.js → components/组件 测试
热门推荐
似水流年，举重若轻
05-28 3万+
关于它是怎么调用运作的：https://blog.csdn.net/zbl744949461/article/details/86134414 一. 准备工作： 1.下载webstorm，安装vue。 2.创建项目，cd到要放项目的文件夹下 vue init webpack vue_test 3.安装各种包 npm install 4.运行 cd vue_te...
vue-cli打包后本地运行dist文件中的index.html操作
10-14
标题和描述中提到的核心知识点是如何使用Vue CLI打包后的项目在本地环境中运行。Vue CLI是Vue.js的官方命令行工具，它简化了Vue.js项目的创建和开发过程。打包是开发周期中的一个关键步骤，通常是将源代码转换为生产...
vue编译打包本地查看index文件的方法
08-27
本文将详细介绍如何在Vue编译打包后，本地查看`index.html`文件，以及`/build/config/index.js`配置文件中的`assetsPublicPath`参数的作用。 首先，确保你已经安装并配置了Vue CLI（Vue.js的命令行工具）。如果你还...
vue项目打包后打开页面空白解决办法
01-21
网上很多说自己的VUE项目通过Webpack打包生成的list文件，放到HBulider打包后，通过手机打开一片空白。这个主要原因是路径的问题。 1、记得改一下config下面的index.js中bulid模块导出的路径。因为index.html里边的...
Vue3 - 完美解决 vite 打包后在本地浏览器直接打开运行，build 打包后双击 index.html 直接以 file 协议运行网站（资源、接口等正常访问，和部署到服务器运行效果一样）
王佳斌
09-07 1万+
vue3 vite怎么支持file协议本地打开，vite打包文件如何支持files协议,支持双击即可打开网页，vue3 vite打包后双击本地运行，vue3 vite打包后怎么直接在浏览器双击打开访问，vite打包后显示空白，vite如何支持本地file协议打开，vue3 vite打包后如何本地查看网站，vue3 vite项目打包后本地启动白屏怎么办，vite打包后的代码如何在本地运行，vite+vue3 打包在fIle本地index.html打开项目，打包后如何直接打开index.html文件，vue3
vueCli3测试环境打包js文件目录以及配置
Miss739999536的博客
05-16 1万+
vuecli3已经出来不短时间了，但是我在实际应用当中还是存在一些问题，比如我想打包一个测试环境的包， js被打包至与html同级目录下，虽然这不影响生产环境的打包目录，但这还是给我造成很大的困扰，因为我想要打包后的js文件都是存放在js文件目录下的，so~该如何做呢。 只要我们在vue.config.js里面添加配置就可以了， 加入我们在pakeage.json中指定测试环境mode为...
Vue打包后（打开index）出现空白问题
qq_44866810的博客
12-08 417
Vue打包后（点击index）出现空白问题
vue项目打包后如何本都部署访问
zy199701的博客
07-04 2656
2、输入 npm i express -s 是用于在 Node.js 项目中安装 Express 框架的命令。app.use(express.static(‘./dist’)) // dist 是项目的打包资源路径。3、.将项目打包好的dist文件放入其中以及新建一个app.js文件用于运行。缺点，输入其他路由报错，点击按钮可以跳转，不知道怎么解决，直接转入方式二。1、新建一个文件夹 进入目录后打开cmd 输入npm init -y。5、接着在cmd输入运行命令 node .\app.js。
在vue项目中为啥不能用index作为key？
前端达人
11-02 1458
啊？不是吧，在vue中，不能使用index作为key呢？使用index作为key又好理解又方便，为什么不能使用呢？看文章就知道啦~.一、key的作用是什么？key的作用众所周知，看一个demo就知道：<scriptsrc="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> <body> ...
vue项目打包之后怎么在本地运行
萧萧的博客
07-12 1万+
vue项目打包后的文件需要在本地运行，这里介绍两种方法 （一）搭建express本地服务器 1、安装express-generator npm i express-generator -g 2、创建一个express项目 express my-express-project 3、进入项目目录 cd my-express-project 这时候能看到my-express...
vue项目入门——index.html和App.vue
阿常的博客
04-02 2844
讲解vue项目入门——index.html和App.vue这两个文件
谈谈vue为什么不能用index做为唯一标识
梅花寺
12-02 420
在vue中，执行渲染函数前就可以得到一个虚拟节点树，使用虚拟节点树就可以渲染页面。当页面dom节点动态改变时，在渲染之前，会使用新生成的虚拟节点和上一次生成的虚拟节点进行对比，只渲染不同的部分，各个虚拟节点就是一个对象，描述了一层容器的特征，下面是vue代码中点击前change按钮前的虚拟节点树}整理了75个JS高频面试题，并给出了答案和解析，基本上可以保证你能应付面试官关于JS的提问。
【转】怎样运行 Vue 打包后的项目
qq_33422122的博客
03-01 4653
Vue build 后运行命令，无需放入tomcat根目录
vue3 打包后直接运行html
02-08
Vue3 打包后直接运行 HTML 的步骤如下： 1. 在 Vue3 项目的根目录下，执行 `npm run build` 命令进行打包。这会生成一个 `dist` 文件夹，其中包含打包后的代码。 2. 打开 `dist` 文件夹，找到生成的 `index.html` 文件。 3. 将 `index.html` 文件复制到你想要运行的地方，例如服务器的公共目录或者本地的文件夹。 4. 打开复制到的 `index.html` 文件，通过浏览器打开即可开始运行 Vue3 的应用。 注意事项： 1. 在复制 `index.html` 文件到其他地方之前，确保 `dist` 文件夹中的所有文件都已经被复制，因为 `index.html` 中引用的文件都存在于 `dist` 文件夹中。 2. 如果 Vue3 的应用需要与后端 API 进行交互，确保在复制 `index.html` 文件之前将相关的 API 地址配置正确。 3. 如果在应用中使用了路由功能或者其他额外的依赖库，确保将这些依赖文件也一同复制到目标位置。 通过上述步骤，你可以将 Vue3 的应用打包后直接运行在 HTML 中，无需依赖开发环境。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值