问题：

vue项目完成打包上线的时候遇到静态资源找不到的问题，网上很多解决办法都是基于vue-cli 2.x 来解决的，但从vue-cli 3.0以后，便舍弃了配置文件夹（便没有了config这个文件夹），所有配置文件都写在了一个文件 vue.config.js中 ，并且需要自己手动创建，创建位置：与src同级。

解决方法：

1. vue-cli 2.x版本

在config文件夹下的index.js中修改 assetsPublicPath: './'

2. vue-cli 3.x版本

在 cli3 中 assetsPublicPath 属性被 baseUrl 取代，只需要在vue.config.js 添加baseUrl 属性 设为 ‘./’ 即可

3. vue-cli 4.x版本

与cli3相同都是修改 vue.config.js 文件 ，但将属性换为   publicPath:'./'

 

vue-cli 如何配置assetsPublicPath； vue.config.js如何更改assetsPublicPath配置；的更多相关文章

  1. vue cli 中关于vue.config.js中chainWebpack的配置

    Vue CLI  的官方文档上写:调整webpack配置最简单的方式就是在vue.config.js中的configureWebpack选项提供一个对象. Vue CLI 内部的 webpack 配置 ...

  2. webpack配置之webpack.config.js文件配置

    webpack配置之webpack.config.js文件配置 webpack.config.js webpack resolve  1.总是手动的输入webpack的输入输出文件路径,是一件非常繁琐 ...

  3. Vue、webpack中默认的config.js、index.js 配置详情

    在vue.js 框架搭建好后,其vue-cli 自动构建的目录里面相关环境变量及其基本变量配置,如下代码所示: module.exports = { build: { index: path.reso ...

  4. 关于自己配置有关webpack.config.js和vue项目搭建相关步骤

    ## Webpack的配置和使用 ### 安装 1. 全局安装 ``` npm install webpack -g ``` 2. 本地安装 ``` npm install webpack -D `` ...

  5. 前端——Vue CLI 3.x搭建Vue项目

    一.Node安装 windows 1. Node.js (>=8.9, 推荐8.11.0+) Node官网下载 .msi 文件,按步骤下载安装即可. 安装完之后在cmd中输入 node -v,若 ...

  6. ubuntu下安装vue/cli提示No command 'vue' found

    通过官方指令 npm install -g @vue/cli 安装vue脚手架提示: No command 'vue' found, did you mean: Command 'vpe' from ...

  7. webpack.config.js文件的高级配置

    一.多个入口文件之前我们配置的都是 一个入口 var webpack = require('webpack'); var commonsPlugin = new webpack.optimize.Co ...

  8. VUE CLI 3.0 项目引入 Mock.js

    mockjs 官网:http://mockjs.com/ 之前没有使用过 mockjs 的同学,请参考官网文档,数据生成规则和方法的调用都有详细说明. 一.通过npm安装依赖包 1. 进入到项目目录, ...

  9. @vue/cli 3 打包文件读取绝对路径处理

    @vue/cli 3 封装了 webpack.config.js,一般都在 vue.config.js 里面配置,官网不推荐在 webpack 的 output 处理,这里踩了一下坑,希望可以帮到后面 ...

随机推荐

  1. Java测试开发--HttpClient常规用法（九）

    1.HttpClient可以读取网页(HTTP/HTTPS)内容 2.对url发送get/post请求(带不带参数都可以),进行测试 一.maven项目pom.xml需要引入包 <depende ...

  2. js 实现匀速移动

    js 实现匀速移动 <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...

  3. Linux内核内存检测工具KASAN

    KASAN 是 Kernel Address Sanitizer 的缩写,它是一个动态检测内存错误的工具,主要功能是检查内存越界访问和使用已释放的内存等问题.KASAN 集成在 Linux 内核中,随 ...

  4. python递归三战：Sierpinski Triangle、Tower of Hanoi、Maze Exploring

    本文已做成视频教程投稿b站(视频版相对文本版有一些改进),点击观看视频教程 本文主要通过三个实例来帮助大家理解递归(其展示动画已上传B站): 谢尔宾斯基三角形(Sierpinski Triangle) ...

  5. Typora下载安装教程

    Typoa下载和安装 Typora---程序员记事本!!! 这里我们选择Typora作为我们的编辑器,功能的强大需要各位自己去体会. Typora下载地址 点击链接打开,然后选择Download! 根 ...

  6. java动态编译——tools.jar问题

    笔者在学习中写了一段简单的动态编译代码,但编译一直无法通过,起初认为受路径中存在汉字影响,修改路径后仍然没有解决.最终定位错误是:Java在进行动态编译的时候需要用到tools.jar资源包,若too ...

  7. Water 2.4 发布，一站式服务治理平台

    Water(水孕育万物...) Water 为项目开发.服务治理,提供一站式解决方案(可以理解为微服务架构支持套件).基于 Solon 框架开发,并支持完整的 Solon Cloud 规范:已在生产环 ...

  8. [noi31]MST

    定义dp[i]表示当前连通块状态为i的方案数(状态记录该状态每一个连通块的大小),那么从小到大枚举每条边,考虑这条边在不在最小生成树上: 1. 如果不在最小生成树上,那么这条边有$\sum_{i=1} ...

  9. 填坑总结：python内存泄漏排查小技巧

    摘要:最近服务遇到了内存泄漏问题,运维同学紧急呼叫解决,于是在解决问题之余也系统记录了下内存泄漏问题的常见解决思路. 本文分享自华为云社区<python内存泄漏排查小技巧>,作者:luti ...

  10. ICCV2021 | PnP-DETR：用Transformer进行高效的视觉分析

    ​  前言  DETR首创了使用transformer解决视觉任务的方法,它直接将图像特征图转化为目标检测结果.尽管很有效,但由于在某些区域(如背景)上进行冗余计算,输入完整的feature maps ...