此方式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. session机制,浏览器禁用cookie后,怎么使用session

    sessionid是存储在cookie中的,解决方案如下: Session URL重写,保证在客户端禁用或不支持COOKIE时,仍然可以使用Session session机制.session机制是一种 ...

  2. Cesium学习笔记-工具篇20-PrimitiveTexture自定义渲染-贴图【转】

    前几篇博客我们了解了自定义点.线.面绘制,这篇我们接着学习cesium自定义纹理贴图.我们完成点线面的绘制,只是绘制出了对象的框架,没有逼真的外观.逼真外观是需要设置材质来实现:Material . ...

  3. 测量MySQL的表达式和函数的速度

    测量MySQL的表达式和函数的速度,可以调用benchmark()函数.语法格式是benchmark(loop_count,expr).运行的返回值是0,但是mysql会打印一行显示语句大概要执行多长 ...

  4. Linux配置crontab

    1. 添加任务(每分钟执行一次)crontab -e* * * * * /home/lings/logRotate.sh 2. 查看日志Jun 5 20:25:01 localhost CROND[8 ...

  5. leetcode 10. Regular Expression Matching 、44. Wildcard Matching

    10. Regular Expression Matching https://www.cnblogs.com/grandyang/p/4461713.html class Solution { pu ...

  6. 【转载】 tensorflow的单层静态与动态RNN比较

    原文地址: https://www.jianshu.com/p/1b1ea45fab47 yanghedada -------------------------------------------- ...

  7. MD5(2)

    /************************************************ MD5 算法的Java Bean @author:Topcat Tuppin Last Modifi ...

  8. LeetCode:字符串相加【415】

    LeetCode:字符串相加[415] 题目描述 给定两个字符串形式的非负整数 num1 和num2 ,计算它们的和. 注意: num1 和num2 的长度都小于 5100.num1 和num2 都只 ...

  9. VisualStudio开发UE4工程设置

    转自:http://wangjie.rocks/2016/06/24/ue4-vs-setup/ 推荐插件 Visual Assist X C++ 代码高亮 UnrealVS Extension UE ...

  10. Python3中strip()、lstrip()、rstrip()用法详解

    Python中有三个去除头尾字符.空白符的函数,它们依次为: strip: 用来去除头尾字符.空白符(包括\n.\r.\t.' ',即:换行.回车.制表符.空格) lstrip:用来去除开头字符.空白 ...