此方式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. #C++初学记录(算法效率与度量)

    时间性能 算法复杂性函数: \[ f(n)=n^2 +1000n+\log_{10}n+1000 \] 当n的数据规模逐渐增大时,f(n)的增长趋势: 当n增大到一定值以后,计算公式中影响最大的就是n ...

  2. Hadoop综合大作业1

    本次作业来源于:https://edu.cnblogs.com/campus/gzcc/GZCC-16SE1/homework/3363 一.课程评分标准: 分数组成: 考勤 10 平时作业 30 爬 ...

  3. linux core 性能

    apt-get install lrzsz apt-get install vim apt-get install -y net-tools apt-get install -y procps htt ...

  4. jmeter元件作用及执行顺序

    jmeter是一个开源的性能测试工具,它可以通过鼠标拖拽来随意改变元件之间的顺序以及元件的父子关系,那么随着它们的顺序和所在的域不同,它们在执行的时候,也会有很多不同. jmeter的test pla ...

  5. (十三)GBDT模型用于评分卡模型python实现

    python信用评分卡建模(附代码,博主录制) https://study.163.com/course/introduction.htm?courseId=1005214003&utm_ca ...

  6. 修改mysql开启innodb支持

    1.找到/etc/my.cnf文件 a. 修改默认引擎 b. 注释掉: loose-skip-innodb c.打开被注释掉的innodb配置 2.重启服务器  /etc/init.d/mysql r ...

  7. 图像基础知识之YUV

     一.YUV常用格式 YUV是编译true-color颜色空间(color space)的种类,Y'UV, YUV, YCbCr,YPbPr等专有名词都可以称为YUV,彼此有重叠.“Y”表示明亮度(L ...

  8. R3 x64枚举进程句柄

    转载:https://blog.csdn.net/zhuhuibeishadiao/article/details/51292608 需要注意的是:在R3使用ZwQueryObject很容易锁死,需要 ...

  9. Swift自定义AlertView

    今天项目加新需求,添加积分过期提醒功能: 第一反应就用系统的UIAlertViewController,但是message中积分是需要红色显示. // let str = "尊敬的顾客,您有 ...

  10. IEDA中使用阿里插件Alibaba Cloud Toolkit和Arthas(阿尔萨斯)

    在 IntelliJ IDEA 中安装和配置 Cloud Toolkit 在 IntelliJ IDEA 中安装和配置 Cloud Toolkit 后,您可以将本地应用快速部署到阿里云 ECS.EDA ...