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、測試環(huán)境跨域

修改: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、修改靜態(tài)文件夾為非static

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

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內(nèi)容