在webpack打包时,npm run build 访问里面的index首页,发现路径不对,有时候是空白页。报错一般就两种最常见的路径问题1.js,css路径错误。2.图片,ttf,woff,woff2路径错误
1.js,cs的路径错误
image.png在代码结构中发现引入的js和css的路径前面有一个"/"
image.png解决方法:在config下面的index.js把
assetsPublicPath: '/', 修改为: assetsPublicPath: './',
// see http://vuejs-templates.github.io/webpack for documentation.
var path = require('path')
module.exports = {
build: {
env: require('./prod.env'),
index: path.resolve(__dirname, '../dist/index.html'),
assetsRoot: path.resolve(__dirname, '../dist'),
assetsSubDirectory: 'static',
assetsPublicPath: '/',
productionSourceMap: true,
// 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-plugin
productionGzip: 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 off
bundleAnalyzerReport: process.env.npm_config_report
},
2..ttf .woff .woff2.图片路径错误
image.png解决方法:在build下面的webpack.base.conf.js把 limit 的值 调的大些 至少比你的字体文件大,完美解决。
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader',
options: vueLoaderConfig
},
{
test: /\.js$/,
loader: 'babel-loader',
include: [resolve('src'), resolve('test')]
},
{
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
loader: 'url-loader',
query: {
limit: 10000, //将 limit 的值 调的大些 至少比你的图片文件大
name: utils.assetsPath('img/[name].[hash:7].[ext]')
}
},
{
test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
loader: 'url-loader',
query: {
limit: 10000,//将 limit 的值 调的大些 至少比你的字体文件大
name: utils.assetsPath('./fonts/[name].[hash:7].[ext]')
}
}
]
}
网友评论