vue项目打包

一、终端运行命令 npm run build

二、打包成功的标志与项目的改变,如下图:

3、点击index.html,通过浏览器运行,出现以下报错,如图:

四、那么应该如何修改呢?
具体步骤如下:
1、查看package.js文件的scripts命令
2、打开webpack.dev.conf.js文件,找到publicPath: config.dev.assetsPublicPath,按Ctrl点击,跳转到index.js文件
3、其中dev是开发环境,build是构建版本,找到build下面的assetsPublicPath: '/',然后修改为assetsPublicPath: './',即“/”前加点。
4、终端运行 npm run build 即可。

此时点击index.html,通过浏览器运行便,会发现动态绑定的static的图片找不到,故static必须使用绝对路径。将图片路径修改为绝对路径,至此,打包完成。

vue项目打包-2-九五小庞的更多相关文章

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

    我又来了,今天部署了下vue项目,使用nginx做了代理,这样可以解决跨域的问题,这里做一个简单讲解. 1.先看vue项目打包(我这里使用的是vscode开发工具) 这里是我的项目结构: 打包之前需要 ...

  2. vue项目打包采坑

    1. vue项目打包采坑 1.1. vue运行报错error:Cannot assign to read only property 'exports' of object '#' 这个错误我是在打包 ...

  3. Vue项目打包后背景图片路径错误

    vue项目打包之后背景图片出错的解决方案如下: 1,找到 config->index.js里面,如下修改 默认配置: env: require('./prod.env'), index: pat ...

  4. vue项目打包后运行报错400如何解决

    昨天一个Vue项目打包后,今天测试,发现无论localhost还是服务器上都运行不了,报错如下: Failed to load resource: the server responded with ...

  5. vue项目打包,生成dist文件夹,如何修改文件夹的名字

    vue项目打包之后的dist文件目录是如下 如果想要修改dist或则static文件名称,需要打开config / index.js build: { // Template for index.ht ...

  6. vue项目打包踩坑记

    基于webpack+vue-cli下的vue项目打包命令是 npm run build ,等待打包完成后在根目录生成dist文件夹,里面包含了所有项目相关的内容. 注意:需要完整版的vue-cli项目 ...

  7. vue项目打包成html,在本地点击直接能打开

    默认情况下vue项目打包后,本地打开index.html是空白的,有报错.Failed to load resource: net::ERR_FILE_NOT_FOUND 这时需要修改config-& ...

  8. cordova+vue 项目打包成Android(apk)应用

    现在使用vue开发的项目越来越多,使用vue开发的移动端打包就成了最大的问题.现在前端打包方案有好多种,但是综合来说,我比较喜欢用cordova来进行Android和ios的打包,配置完成之后,每次只 ...

  9. vue项目打包问题

    使用vue-cli脚手架构建vue项目 vue init webpack project npm run build 打包时出现 Tip: built files are meant to be se ...

随机推荐

  1. 分享一款知识库平台系统-wcp

    入园这么些天了,今天搭建了一套知识库系统,使用效果还不错,分享一些过程经验. 搭建准备: 软件系统:WCP4.3免费版 (免费开源,支持Windows,使用简单,有傻瓜式一键安装包-win平台) 服务 ...

  2. [BUUOJ记录] [BJDCTF 2nd]文件探测

    感觉算是这次比赛里面综合性很强的一道题了,主要考察SSRF.PHP伪协议包含.挖掘逻辑漏洞和一个小tirck.委屈的是第一天晚上就做到了最后一步,想到了SESSION置空即可绕过,但是最后读Flag姿 ...

  3. JsonAnalyzer 源码下载

    下载地址:https://files.cnblogs.com/files/heyang78/JsonAnalyzer20200518-01.zip 测试用例:https://www.cnblogs.c ...

  4. Intel-Pin的windows安装

    环境安装 操作系统:windows10 需要环境: 1.Visual Studio Community 2019 Edition  ( https://visualstudio.microsoft.c ...

  5. [源码分析] OpenTracing之跟踪Redis

    [源码分析] OpenTracing之跟踪Redis 目录 [源码分析] OpenTracing之跟踪Redis 0x00 摘要 0x01 总体逻辑 1.1 相关概念 1.2 埋点插件 1.3 总体逻 ...

  6. 我是怎样通过个人项目成长为高级 JavaScript 开发者的

    大道理都是能用三两句话说清的 . 在我开发人员的职业生涯中,最好的决定之一就是不再满足于只做工具的使用者. 我决定创建我自己的工具,并不是为了卖钱,而是要了解这些技术的实际工作方式,并提升我的技术技能 ...

  7. python守护线程t.setDaemon(True)

    守护线程是守护主线程  t.setDaemon(True),调用函数里面存在等待时间时,只要设置了守护线程,函数中等待时间下面的代码都不会再执行

  8. [LeetCode]66. 加一(数组)

    ###题目 给定一个由整数组成的非空数组所表示的非负整数,在该数的基础上加一. 最高位数字存放在数组的首位, 数组中每个元素只存储单个数字. 你可以假设除了整数 0 之外,这个整数不会以零开头. 示例 ...

  9. 对比 Redis 中 RDB 和 AOF 持久化

    概念 Redis 是内存数据库,数据存储在内存中,一旦服务器进程退出,数据就丢失了,所以 Redis 需要想办法将存储在内存中的数据持久化到磁盘. Redis 提供了两种持久化功能: RDB (Red ...

  10. Linux实战(19):Shell交互式read 用法

    read 用法有好几种,我在实战过程中用到了 -p,记一笔以防不用忘记了. 实例 #!/bin/bash echo "检测IP是否被占用" while read -p " ...