vue dist打包后找不到图片路径

打开dist文件夹下新生成的index.html文件，会发现页面空白，打开控制台会发现页面中引用的css和js文件都找不到：

说明引用路径错了，需要手动修改：

进入config/index.js

原配置中的引用路径是’/’（根目录）：

 build: {// Template for index.htmlindex: path.resolve(__dirname, "../dist/index.html"),// PathsassetsRoot: path.resolve(__dirname, "../dist"),assetsSubDirectory: "static",assetsPublicPath: "/",//打开dist文件夹下新生成的index.html文件，会发现页面空白，打开控制台会发现页面中引用的css和js文件都找不到：只要把assetsPublicPath: "/"改成assetsPublicPath: "./"// assetsPublicPath 有两个，一个是build里的，一个是dev里的，只用把build里的改成‘./’，dev里的别改/*** Source Maps*/// productionSourceMap: true,productionSourceMap: false,//是环境设置为生产环境// https://webpack.js.org/configuration/devtool/#productiondevtool: "#source-map",// Gzip off by default as many popular static hosts such as// Surge or Netlify already gzip all static assets for you.// Before setting to `true`, make sure to:// npm install --save-dev compression-webpack-pluginproductionGzip: false,productionGzipExtensions: ["js", "css"],// Run the build command with an extra argument to// View the bundle analyzer report after build finishes:// `npm run build --report`// Set to `true` or `false` to always turn it on or offbundleAnalyzerReport: process.env.npm_config_report}

修改为’./’（当前目录）：

 build: {// Template for index.htmlindex: path.resolve(__dirname, "../dist/index.html"),// PathsassetsRoot: path.resolve(__dirname, "../dist"),assetsSubDirectory: "static",assetsPublicPath: "./",//打开dist文件夹下新生成的index.html文件，会发现页面空白，打开控制台会发现页面中引用的css和js文件都找不到：只要把assetsPublicPath: "/"改成assetsPublicPath: "./"// assetsPublicPath 有两个，一个是build里的，一个是dev里的，只用把build里的改成‘./’，dev里的别改/*** Source Maps*/// productionSourceMap: true,productionSourceMap: false,//是环境设置为生产环境// https://webpack.js.org/configuration/devtool/#productiondevtool: "#source-map",// Gzip off by default as many popular static hosts such as// Surge or Netlify already gzip all static assets for you.// Before setting to `true`, make sure to:// npm install --save-dev compression-webpack-pluginproductionGzip: false,productionGzipExtensions: ["js", "css"],// Run the build command with an extra argument to// View the bundle analyzer report after build finishes:// `npm run build --report`// Set to `true` or `false` to always turn it on or offbundleAnalyzerReport: process.env.npm_config_report}

npm run build

vue dist打包后找不到图片路径相关推荐

webpack:url-loader打包后找不到图片、字体路径问题
项目在css中引用图片,打包之后找不到对应的图片和字体路径打包配置文件的路径配置:project/config/index.js 对应的图片打包配置:project/build/we ...
解决vue项目打包后woff、tff资源路径加载错误
错误路径解决方法: 重新打包
打包后index.html路径错误,解决Vue项目打包后打开index.html页面显示空白以及图片路径错误的问题...
解决Vue项目打包后打开index.html页面显示空白以及图片路径错误的问题 2018年05月23日 10:05:35 for_weber 阅读数:14179 Vue项目运行npm run buil ...
关于vue项目打包后提示图片文件路径错误的解决方法
vue项目打包后在production模式下提示图片 '404(not found),在dev环境下好好的,打包了就提示这个错误.这是为什么呢,以前第一次使用vue-cli构建项目的的时候只有两个图片 ...
vue系列---项目打包找不到图片路径
在测试环节发现有图片找不到,发现是图片路径没有写对. 报错如下: 原代码: <img src="/src/assets/img/arrow.png" alt="&q ...
快速解决Vue项目打包后文件过大问题
快速解决Vue项目打包后文件过大问题为什么打包后文件过大? 如何快速解决一.路由懒加载[使用es6提案的import()方式] 二.CDN引入为什么打包后文件过大? 移动app项目,使用vue- ...
php项目index页面空白,如何解决vue项目打包后打开页面空白的问题
这篇文章主要介绍了vue项目打包后打开空白解决办法,内容挺不错的,现在分享给大家,也给大家做个参考. 网上很多说自己的VUE项目通过Webpack打包生成的list文件,放到HBulider打包后,通 ...
vue项目打包后生成一个配置文件可以修改打包后的服务器api地址
vue项目打包后生成一个配置文件可以修改打包后的服务器api地址问题描述:vue项目打包上线之后,如果要改服务器api地址,只能在源码更改然后重新打包发布,为了解决这个问题,我们可以在static增 ...
Python项目打包后找不到路径问题，将资源文件数据文件打包到exe文件中
目录问题描述 Python项目打包后,找不到配置文件路径 1.冻结路径 2.使用方法将资源文件打包到exe文件中 1.打包前准备 2.返回临时路径 3.使用方法 4.编译打包问题描述 pyins ...

vue dist打包后找不到图片路径

vue dist打包后找不到图片路径相关推荐

最新文章

热门文章