vue——webpack设置

最新推荐文章于 2024-10-08 02:10:34 发布

YUHUI01

最新推荐文章于 2024-10-08 02:10:34 发布

阅读量767

点赞数

分类专栏： webpack 文章标签： webpack设置

本文链接：https://blog.csdn.net/YUHUI01/article/details/83692738

版权

webpack 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

本文介绍如何在Vue项目中配置跨域代理，通过修改config/index.js中的proxyTable属性实现本地开发环境的跨域请求。同时，讲解了如何在webpack.prod.conf.js中设置publicPath以优化生产环境的资源路径，并提供了关闭生成source map的方法。

摘要由CSDN通过智能技术生成

1、跨域代理配置

使用 vue-cli 创建vue项目，在config配置文件夹下的index.js中，dev属性中有关于跨域代理的 proxyTable 属性，默认为空属性，

    proxyTable: {
      '/api':{
        target:'http://localhost:3000', //目标URL地址
        changeOrigin: true, //是否跨域，默认为true
        pathRewrite: {
          '^/api': '/' //重写接口,把本地URL http://localhost:8080/api 转到 http://localhost:3000 根目录下
        }
      }
    },
    host: 'localhost', 
    port: 8080,

2、打包配置

在webpack.prod.conf.js文件中的webpackConfig找到output，添加一项 publicPath: './'

使用npm run build 生成 dist 文件夹，就可以使用浏览器打开了

3、关闭生成socurce文件

if (process.env.NODE_ENV === 'production') {
  module.exports.devtool = '#source-map'
  module.exports.plugins = (module.exports.plugins || []).concat([
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: '"production"'
      }
    }),
    new webpack.optimize.UglifyJsPlugin({
      sourceMap: false, // 默认为true
      compress: {
        warnings: false
      }
    }),
    new webpack.LoaderOptionsPlugin({
      minimize: true
    })
  ])
}