将以下插件升级至对应版本或最新版本
webpack@4.4.1
css-loader@0.28.10
extract-text-webpack-plugin@4.0.0-beta.0
file-loader@1.1.11
html-webpack-plugin@3.1.0
optimize-css-assets-webpack-plugin@4.0.0
url-loader@1.0.1
vue-loader@14.2.2
vue-style-loader@4.1.0
vue-template-compiler@2.5.16
webpack-bundle-analyzer@2.11.1
webpack-dev-middleware@3.1.0
webpack-dev-server@3.1.1
webpack-hot-middleware@2.21.2
更新配置文件
webpack.baze.conf.js
// 在入口之前 添加 新版webpack强制要求添加,不添加也可以执行,会有警告
module.exports =
{
mode: 'development'
...
}
复制代码
Eslint 报错
// 在webpack.dev.conf.js 和 webpack.prod.conf.js 中的plugins下 添加如下配置
new webpack.LoaderOptionsPlugin({ options: {} })复制代码
由于新版webpack不支持CommonsChunkPlugin所以需要把相关配置进行更换
new webpack.optimize.CommonsChunkPlugin({
name: 'vendor',
minChunks: function (module, count) {
// any required modules inside node_modules are extracted to vendor
return (
module.resource &&
/\.js$/.test(module.resource) &&
module.resource.indexOf(
path.join(__dirname, '../node_modules')
) === 0
)
}
}),
new webpack.optimize.CommonsChunkPlugin({
name: 'manifest',
chunks: ['vendor']
})
复制代码
// 把上面的删除了 --- 然后在 plugins 的同级 添加
optimization: {
splitChunks: {
cacheGroups: {
commons: {
name: "commons",
chunks:"initial",
minChunks: 2
}
}
}
}
复制代码
原来删除的extract-text-webpack-plugin使用mini-css-extract-plugin替代
npm remove extract-text-webpack-plugin
npm install--save-dev mini-css-extract-plugin
复制代码
// utils.js
const ExtractTextPlugin = require('extract-text-webpack-plugin');
if(options.extract) {
return ExtractTextPlugin.extract({
use: loaders,
allback: 'vue-style-loader'
})
} else {
return ['vue-style-loader'].concat(loaders)
复制代码
//改为
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
if(options.extract) {
return[MiniCssExtractPlugin.loader].concat(loaders)
} else {
return ['vue-style-loader'].concat(loaders)
}
复制代码
// webpack.prod.conf.js
const ExtractTextPlugin = require('extract-text-webpack-plugin');
new ExtractTextPlugin({
filename: utils.assetsPath('css/[contenthash].css')
})
复制代码
// 改为
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
new MiniCssExtractPlugin({
filename: utils.assetsPath('css/[contenthash].css')
})
复制代码
Vue axios 跨域问题
npm install --save axios复制代码
main.js导入axios
import Axios from 'axios'
Vue.prototype.$axios = Axios
Vue.prototype.HOME = '/api'
复制代码
修改config目录下index.js
proxyTable: {
'/api': {
target: 'http://www.yequzhibo.com:8080',
changeOrigin: true,
pathRewrite: {
'^/api': ''
}
}
},
var url = this.HOME + '/mainpage/mainPage/hotRooms'
复制代码