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. Arbitrary-Oriented Object Detection with Circular Smooth Label(ECCV2020,旋转目标检测)

    论文链接:https://arxiv.org/abs/2003.05597 code:https://github.com/Thinklab-SJTU/CSL_RetinaNet_Tensorflow ...

  2. Codeforces Round #571 (Div. 2)-D. Vus the Cossack and Numbers

    Vus the Cossack has nn real numbers aiai. It is known that the sum of all numbers is equal to 00. He ...

  3. tokitsukaze and RPG(暴力优化)

    链接:https://ac.nowcoder.com/acm/contest/308/B 来源:牛客网 时间限制:C/C++ 1秒,其他语言2秒 空间限制:C/C++ 262144K,其他语言5242 ...

  4. 安装和配置SQL

    安装和配置SQL 在终端输入 npm i mysql命令安装SQL(加上-g全局安装) 配置SQL // 1.导入mysql模块 const mysql = require("mysql&q ...

  5. 小程序开发-使用npm包

    微信小程序引用npm包 微信小程序官方支持使用npm包,地址为 https://developers.weixin.qq.com/miniprogram/dev/devtools/npm.html 实 ...

  6. 获取.properties配置文件属性值

    public class TestProperties { /** * * @Title: printAllProperty * @Description: 输出所有配置信息 * @param pro ...

  7. Java实现内嵌浏览器

    创建项目 ---->   导入需要的jar ---->  代码实现 需要的jar: https://pan.baidu.com/s/1MEZ1S0LnKSMGQm24QWgmCw 代码: ...

  8. (超详细)动手编写 — 栈、队列 ( Java实现 )

    目录 前言 栈 概念 栈的设计 编码实现 小结 队列 概念 队列的设计 编码实现 双端队列 概念 设计 编码 循环队列 循环队列 循环双端队列 声明 前言 栈 概念 什么是栈? **栈 **:是一种特 ...

  9. Java SPI详细的例子

    先翻一个来自于Baeldung的介绍: 为了更通俗易懂我就没有直译,如果有不严谨的地方请大神指教. JavaSPI的定义 Java SPI defines four main components S ...

  10. 面向对象--有参数的__init__方法

    有参数的__init__()方法 class Hero(object): """定义了一个英雄类,可以移动和攻击""" def __init ...