Vue项目的设置文件,可以自定义设置如代理、插件等‌

vue项目的设置文件,可以自定义设置如代理,插件等
在Vue项目中，可以通过vue.config.js文件来自定义设置，比如代理设置（devServer.proxy）、插件设置等。
以下是一个简单的vue.config.js设置示例：

1. module.exports = {
2.   // 基本路径
3.   publicPath: process.env.NODE_ENV === 'production' ? '/production-sub-path/' : '/',
5.   // build时构建文件的目录 构建时传入 --no-clean 可关闭该行为
6.   outputDir: 'dist',
8.   // 静态资源的目录 (js, css, img, fonts)
9.   assetsDir: '',
11.   // 生产环境是否生成 sourceMap 文件
12.   productionSourceMap: false,
14.   // CSS 相关选项
15.   css: {
16.     // 是否使用css分离插件 ExtractTextPlugin
17.     extract: true,
18.     // 开启 CSS source maps?
19.     sourceMap: false
20.   },
22.   // devServer 代理设置
23.   devServer: {
24.     host: '0.0.0.0',
25.     port: 8080,
26.     https: false,
27.     open: true,
28.     proxy: {
29.       // 配置跨域处理 可以设置你想要代理的接口
30.       '/api': {
31.         target: 'http://api.example.com',
32.         changeOrigin: true,
33.         pathRewrite: {
34.           '^/api': ''
35.         }
36.       }
37.     }
38.   },
40.   // 插件选项
41.   pluginOptions: {
42.     // ...
43.   },
45.   // configureWebpack 或 chainWebpack 调整内部webpack配置
46.   configureWebpack: config => {
47.     if (process.env.NODE_ENV === 'production') {
48.       // 为生产环境修改配置...
49.     } else {
50.       // 为开发环境修改配置...
51.     }
52.   },
54.   chainWebpack: config => {
55.     config.plugin('html').tap(args => {
56.       if (process.env.NODE_ENV === 'production') {
57.         // 为生产环境修改配置...
58.       } else {
59.         // 为开发环境修改配置...
60.       }
61.       return args;
62.     });
63.   }
64. };

复制代码

这个设置文件包含了基本的设置选项，比如基本路径、输出目录、是否生成source map文件、devServer的端口、代理设置等。同时，它展示了如何使用configureWebpack和chainWebpack来自定义webpack设置。根据你的项目需求，你可以添加或修改这些设置。

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。