返回顶部

vue——抽取请求配置文件，打包后修改配置文件可修改请求地址，不用二次打包。问题：本地启动，静态资源404/修改静态资源后不生效

参考：

1.https://blog.csdn.net/u012193330/article/details/83310924  webpack中的path、publicPath、contentBase的区分

2.https://www.cnblogs.com/beichengshiqiao/p/17339341.html  vue全家桶进阶之路48：Vue3 跨域配置devServer的参数和设置

3.https://www.cnblogs.com/jingxuan-li/p/14656997.html Webpack之 webpack-dev-server 中的 contentBase配置及作用

 

我的情况

vue2项目，想抽取请求配置文件，达到打包后修改配置文件即可修改请求地址，不用二次打包的效果。

1.根目录下（与index.html文件同级）新建public/js/config.js文件，内容如下：

(function () {
  const APP_CONFIG = {
    API_BASE_URL: 'http://xxx:8080', // 后台请求地址
  };

  if (window) window.APP_CONFIG = APP_CONFIG;
})();

2.html文件中引入：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport"
    content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
  <link rel="icon" href="<%= htmlWebpackPlugin.options.url %>favicon.ico">
  <title>测试系统</title>
  <script src="public/js/config.js"></script>
</head>

<body>
  <div id="app"></div>
</body>
</html>

3.具体使用：

axios.defaults.baseURL = window.APP_CONFIG.API_BASE_URL;

注意：一定不要在内部的公共js，如封装的http.js中引入config.js，打包的时候会对其进行编译，导致打包后再修改请求地址无效。

4.打包配置

我的项目打包时指定的是webpack.config.prod.js文件：

...
// 不需要压缩的静态文件
new CopyWebpackPlugin({
    patterns: [
        {
          from: path.resolve(__dirname, './public'),
          to: 'public'
        }
    ]
})
...

 

出现的问题

1.本地启动，config.js文件404

2.本地启动，修改config.js文件后不生效

3.打包一次后，问题1解决了，但问题2仍存在

 

原因

静态资源根目录 contentBase 配置有误。

我的原webpack.config.dev.js文件有指定静态资源根目录：

const path = require('path');
...
devServer: {
    ...
    contentBase: path.resolve(__dirname, './dist'), // << 问题关键  指定静态文件的目录，默认为项目根目录
    ...
}

解决方法

注释掉，默认根目录即可

 

posted @ 2024-10-29 15:26  前端-xyq  阅读(15)  评论(0)  编辑  收藏  举报