vue-cil的日常----webpack打包上线有关问题

npm run build

打包后上传，页面不显示，打印错误信息：

 

Failed to load resource: net::ERR_FILE_NOT_FOUND

 

资源加载不了了，网上查找解决方法：

 

找到config里的index.js,打开修改assetsPublicPath 为“./”

 

依然不显现，继续查找：

 

将webpack.prod.conf.js 中output添加参数publicPath:'./'

 

打包后上传，页面正常显示，问题解决。

 

取消调试文件

config:index.js中：

productionSourceMap值为flase

打包后css文件过大导致有些浏览器读取失败

目前想到的是减少css文件大小

方法一：

限制css中img  icon等的大小limit，防止编译为base64图片增加文件空间；在webpack.base.conf.js

module : {

rules : [

{

test : / \.vue $ /,

loader : ' vue-loader ',

options : vueLoaderConfig

},

{

test : / \.js $ /,

loader : ' babel-loader ',

include : [ resolve( ' src '), resolve( ' test '), resolve( ' node_modules/webpack-dev-server/client ')]

},

{

test : / \. ( png | jpe ? g | gif | svg )( \? . * ) ?$ /,

loader : ' url-loader ',

options : {

limit : 1024,（此处）

name : utils. assetsPath( ' img/[name].[hash:7].[ext] ')

}

},

{

test : / \. ( mp4 | webm | ogg | mp3 | wav | flac | aac )( \? . * ) ?$ /,

loader : ' url-loader ',

options : {

limit : 1024,

name : utils. assetsPath( ' media/[name].[hash:7].[ext] ')

}

},

{

test : / \. ( woff2 ?| eot | ttf | otf )( \? . * ) ?$ /,

loader : ' url-loader ',

options : {

limit : 1024,

name : utils. assetsPath( ' fonts/[name].[hash:7].[ext] ')

}

},

]

},

方法二：

      将css文件分割成多个，但是并没有找到有关webpack插件，如果有还请留言告知。

      css-split-webpack-plugin并不能用，不知道是不是我的安装方法有问题。

方法三：

     通过后端一些操作，改变url接受数据的大小限制。具体操作目前不清楚。