Vue-Cli及webpack常用配置

1、引入jquery

npm install --save jquery@1.12.4

修改：build/webpack.base.conf.js

module.exports = {
  ......
  plugins:[
    new webpack.ProvidePlugin({
      $: "jquery",
      jQuery: "jquery",
      "window.jQuery":"jquery",
      "window.$": "jquery"
    })
  ]
}

2、低版本浏览器promise

npm install --save-dev babel-polyfill

修改：build/webpack.base.conf.js

module.exports = {
   entry: {
    app: ["babel-polyfill", "./src/main.js"]
   },
  ......
}

3、配置scss

npm install node-sass --dev
npm install sass-loader --save-dev

修改：build/webpack.base.conf.js

module:{
  rules:[
  ......
    {
      test: /\.scss$/,
      loaders: ["style", "css", "sass"]
    }
  ......
  ]
}

添加全局scss变量

npm install sass-resources-loader --save-dev

修改：build/utils.js

exports.cssLoaders = function (options) {
  ......
  return{
    ......
    //scss: generateLoaders('sass'),
    scss: generateLoaders('sass').concat(
      {
        loader: 'sass-resources-loader',
        options: {
          resources: path.resolve(__dirname, '../src/assets/scss/color.scss')
        }
      }
    ),
    ......
  }
  ......
}

4、测试环境跨域

修改：config/index.js。假如api的url为：http://www.testapi.com:81/api/xxx/xxx

dev:{
  .......
  proxyTable: { //临时跨域
      '/api': {
        target: 'http://www.testapi.com:81/', //建议少写一级
        changeOrigin: true,
        pathRewrite: {
            '^/api': '/' //建议键的名称为刚才省略的那一级名称
        }
      }
   },
}

5、修改静态文件夹为非static

修改：config/index.js、build/dev-server.js、build/webpack.prod.conf.js