1崭歧、配置打包后的文件路徑
進入config>index.js把assetsPublicPath:'/'改成'./';
build: {
env: require('./prod.env'),
index: path.resolve(__dirname, '../dist/index.html'),
assetsRoot: path.resolve(__dirname, '../dist'),
assetsSubDirectory: 'static',
assetsPublicPath: './',
productionSourceMap: false,
productionGzip: false,
productionGzipExtensions: ['js', 'css']
bundleAnalyzerReport: process.env.npm_config_report
}
2达布、修改端口號8080為9090垛贤,防止端口沖突
進入config>index.js把修改port:9090
module.exports = {
dev: {
assetsSubDirectory: 'static',
assetsPublicPath: '/
host: 'localhost',
port: 9090,
3、配置proxyTable 解決開發(fā)環(huán)境中的跨域問題
module.exports = {
dev: {
proxyTable: {
'/dianping': {
target: 'http://****',
changeOrigin: true,
pathRewrite: {
'^/dianping': '/dianping' //此字段根據(jù)自己項目填寫
}
}
}
4绒窑、有些圖片引用失敗 在build\webpack.prod.conf.js 的限制limit注釋掉
{
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
loader: 'url-loader',
options: {
// limit: 10000,
name: utils.assetsPath('img/[name].[hash:7].[ext]')
}
},
5唤崭、去掉打包后不要的.map文件
在config\index.js 中把productionSourceMap:true改成productionSourceMap:false
build: {
env: require('./prod.env'),
index: path.resolve(__dirname, '../dist/index.html'),
assetsRoot: path.resolve(__dirname, '../dist'),
assetsSubDirectory: 'static',
assetsPublicPath: './',
productionSourceMap: false,
productionGzip: false,
productionGzipExtensions: ['js', 'css']
bundleAnalyzerReport: process.env.npm_config_report
},
6拷恨、build打包發(fā)布后css里的圖片背景找不到文件
build文件里找到 utils.js 文件,修改如下:
if (options.extract) {
return ExtractTextPlugin.extract({
use: loaders,
publicPath: '../../', //解決 build css bg img 加載路徑不對問題 (添加的就是這行)
fallback: 'vue-style-loader'
})
} else {
return ['vue-style-loader'].concat(loaders)
}
}