此方式vue脚手架是3.0版本,2.0版本见最下面
//在项目的根目录下(和package.json文件同级)新建一个文件vue.config.js的文件,将此段代码复制进去。
module.exports = {
baseUrl: '/', //在 baseUrl前面加个点baseUrl: './'
outputDir: 'dist',
lintOnSave: true,
runtimeCompiler: true,
chainWebpack: () => {},
configureWebpack: () => {},
devServer: {
open: process.platform === 'darwin',
host: 'localhost',
port: 8080,
https: false,
hotOnly: false,
proxy: null,
before: app => {}
}
}

注:如果打包之后还不能解决问题,找到你项目里面router.js文件,将mode:‘ history ’注释掉,如果还需要使用此模式,需要和后端进行配合使用,详情请查看官方文档 https://router.vuejs.org/zh/guide/essentials/history-mode.html

2.0版本

1、在build文件下找到utils.js文件,添加publicPath:'../../',如下

if (options.extract) {
return ExtractTextPlugin.extract({
use: loaders,
fallback: 'vue-style-loader',
publicPath:'../../' //添加此段代码,保留背景图片路径原有的路径地址
})
} else {
return ['vue-style-loader'].concat(loaders)
}
}

2、在config文件中找到index.js文件,修改如下

build: {
// Template for index.html
index: path.resolve(__dirname, '../dist/index.html'), // Paths
assetsRoot: path.resolve(__dirname, '../dist'),
assetsSubDirectory: 'static',
assetsPublicPath: './', //将assetsPublicPath:'/'修改为assetsPublicPath: './'
/** * Source Maps */ productionSourceMap: true, // https://webpack.js.org/configuration/devtool/#production devtool: '#source-map', productionGzip: false, productionGzipExtensions: ['js', 'css'], bundleAnalyzerReport: process.env.npm_config_report }

vue-cli搭建的项目打包之后报“资源路径错误&资源文件找不到“的更多相关文章

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

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

  2. vue cli创建typescript项目

    使用最新的Vue CLI @vue/cli创建typescript项目,使用vue -V查看当前的vue cli版本 安装命令 npm install -g @vue-cli 创建项目 vue cre ...

  3. vue打包空白及字体路径错误问题

    vue项目打包后空白 在config/index.js文件中 assetsPublicPath: '/', 改为 assetsPublicPath: './', build: { // Templat ...

  4. springBoot 项目war包部署及改为war包后资源路径错误问题

    参考资料: https://blog.csdn.net/rico_zhou/article/details/83415114 https://blog.csdn.net/pz641/article/d ...

  5. vue cli搭建项目及文件引入

    cli搭建方法:需安装nodejs先 1.npm install -g cnpm --registry=https://registry.npm.taobao.org //安装cnpm,用cnpm下载 ...

  6. vue cli 打包项目造成css背景图路径错误

    vue cli做项目的时候难免会碰到,css引用背景图或者css,js之间的相互引用!!!这时候打包后可能会出现一个错误!!如下图: 写法: 错误: 会无端多出一个“/css/static/” 这样就 ...

  7. 使用@vue/cli搭建vue项目开发环境

    当前系统版本 mac OS 10.14.2 1.安装node.js开发环境 前端开发框架和环境都是需要 Node.js  vue的运行是要依赖于node的npm的管理工具来实现 <mac OS ...

  8. 快速搞定用Vue+Webpack搭建前端项目(学习好久了,该写点东西了......)

    现在开始安装环境 一.安装node.js 首先要安装node.js,去nodejs官网下载即可,地址:http://nodejs.cn/中文网. 安装完成后,打开终端(windows键+R)搜索cmd ...

  9. vue cli 3.x 项目部署到 github pages

    github pages 是 github 免费为用户提供的服务,写博客,或者部署一些纯静态项目. 最近将 vue cli 3.x 初始化项目部署到 github pages,踩了一些坑,记录如下. ...

随机推荐

  1. 安装Rancher容器化管理平台

    卸载已有的避免冲突 yum remove docker  docker-common docker-selinux docker-engine   安装需要的软件包,yum-util 提供yum-co ...

  2. t4模版快速入门

    语法 主要包括指令.文本块.控制块. 1.指令 指令主要包括template, output, assembly, import, include等类型,用以告诉T4引擎如何编译和运行一个模板.这些指 ...

  3. Nodejs介绍和环境搭建

    Nodejs是JavaScript的运行环境,它让 Java Script 可以开发后端程序,实现几乎其他后端 Node.js 是一个 Javascript 运行环境(runtime) 可以与 PHP ...

  4. git pull push 所有分支

    因为远端 git 服务器上有很多分支,一个个分支pull太麻烦,所以找了 pull 所有分支的方法,如下: git branch -r | grep -v '\->' | while read ...

  5. Win10访问共享文件夹如何取消用户名密码

    win10中,开启guest(来宾)账户的步骤是: 右击win10左下角Windows的图标->计算机管理->计算机管理(本地)->系统工具->本地用户和组->用户-&g ...

  6. CenterOS7 安装Mysql8 及安装会遇到的问题

    1.下载 MySQL 所需要的安装包 网址:https://dev.mysql.com/downloads/mysql/ 2.Select Operating System: 选择 Red Hat , ...

  7. Python爬虫笔记安装篇

    目录 爬虫三步 请求库 Requests:阻塞式请求库 Requests是什么 Requests安装 selenium:浏览器自动化测试 selenium安装 PhantomJS:隐藏浏览器窗口 Ph ...

  8. [ARM-Linux开发]linux 里 /etc/passwd 、/etc/shadow和/etc/group 文件内容解释

    linux 里 /etc/passwd ./etc/shadow和/etc/group 文件内容解释 一./etc/passwd 是用户数据库,其中的域给出了用户名.加密口令和用户的其他信息 /etc ...

  9. 【神经网络与深度学习】【计算机视觉】Fast R-CNN

    转自:https://zhuanlan.zhihu.com/p/24780395?refer=xiaoleimlnote 首先声明:本文很多内容来自两个博客: RCNN, Fast-RCNN, Fas ...

  10. 使用Delphi开发linux应用

    对于很多喜欢使用delphi做开发的人都希望delphi能够支持linux平台的开发,终于在delphi10.2版本中,delphi开始支持linux平台的开发了.在这里写一下Linux开发环境的配置 ...