此方式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. [Beta]第七次 Scrum Meeting

    [Beta]第七次 Scrum Meeting 写在前面 会议时间 会议时长 会议地点 2019/5/17 22:00 10min 大运村公寓6F寝室 附Github仓库:WEDO 例会照片 工作情况 ...

  2. pm升级到最新版本、指定版本

    npm 升级到最新版本 //linux下 npm install -g npm npm升级到指定版本 //比如升级到5.6.0 npm install -g npm@5.6.0

  3. ORA-55624: 此时无法为闪回归档启用表

    我们在某应用中使用了FDA特性,但是某些表在解除归档后重新启用时报"ORA-55624: 此时无法为闪回归档启用表",经查询google和MOS相关信息,原因就是太频繁.解决方法: ...

  4. redis的相关原理

    一.AOF 二.RDB 三.哨兵

  5. Python 初级 6 循环

    一.一个简单的for循环 1 重复做相同的事 for looper in [1, 2, 3, 4, 5]: print("hello") 1 looper的值从1开始, 所以loo ...

  6. java常用JVM参数介绍

    采集服务JVM参数说明 -Xmx4g -Xms4g -Xmn512m -XX:MetaspaceSize=256m -XX:MaxMetaspaceSize=4g -Xss256k Xms 是指设定程 ...

  7. pycharm 2019.2 安装包失败

    简介: 最近使用学生账号注册了pycharm,貌似全家桶都可以免费用了,就升级了pycharm到最新版. 但是在使用包管理,安装包的时候出错了 提示没有匹配的版本,下面还提示一个 --trusted- ...

  8. piecewise_construct存在的意义

    C++11中大部分的容器对于添加元素除了传统的 insert 或者 pusb_back/push_front 之外都提供一个新的函数叫做 emplace. 比如如果你想要向 std::vector 的 ...

  9. TP5 模型CURD

    ThinkPHP5的模型是一种对象-关系映射(Object / Relation Mapping ,简称 ORM)的封装,并且提供了简洁的ActiveRecord实现.一般来说,每个数据表会和一个“模 ...

  10. kubelet tls

    当成功签发证书后,目标节点的 kubelet 会将证书写入到 --cert-dir= 选项指定的目录中:此时如果不做其他设置应当生成上述除ca.pem以外的4个文件 kubelet-client.cr ...