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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容