升级webpack4与axios跨域问题

将以下插件升级至对应版本或最新版本

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'