vue如何在vue.config.js文件中导入模块

在vue.config.js文件中导入模块

由于 vue.config.js 是在构建项目时由 Webpack 读取的 Node.js 脚本文件，

而 Node.js 的import 语法只在 ES 模块中有效，

所以在 vue.config.js 中不能直接使用 import 来导入模块，

可以使用 CommonJS 的 require 来导入模块，如下：

// vue.config.js
const constant = require('./src/utils/constant')
console.log(constant.BASE_URL);

相对应的导出模块的写法应当是：

const BASE_URL = 'xxx' 
// constant.js
exports.BASE_URL = BASE_URL

vue项目中vue.config.js文件介绍

vue.config.js 是一个可选的配置文件，如果项目的根目录中没有这个文件，则 Vue CLI 会使用默认的配置。

这个文件的主要目的是为了让开发者能够调整 Vue CLI 生成的项目的默认配置。

vue.config.js 应该导出一个包含了配置选项的对象。

这些配置选项包括但不限于：

• publicPath：指定部署应用时的基本 URL。
• outputDir：指定输出目录（dist）。
• assetsDir：指定除 index.html 以外的静态资源目录（相对于 outputDir）。
• indexPath：指定生成的 index.html 的输出路径（相对于 outputDir）。
• lintOnSave：是否在保存的时候检查并修复 lint 错误。
• chainWebpack：一个高级选项，允许你使用 webpack-chain 进行更细粒度的修改。
• configureWebpack：如果项目的 webpack 配置需要进行更细粒度的修改，则使用这个函数。
• devServer：修改 webpack-dev-server 配置。
• css、parallel、pluginOptions 等其他配置。

这个文件通常位于项目的根目录下，与 package.json 文件同级。

它使得开发者能够灵活地定制 Vue CLI 生成的项目，以满足特定的项目需求或工作流程。

例如，你可以通过 vue.config.js 文件来修改项目的输出目录，或者调整 webpack-dev-server 的配置，以便在开发过程中使用特定的代理设置或端口号。

// vue.config.js
module.exports = {
outputDir: 'dist-custom', // 修改输出目录
devServer: {
port: 8080, // 修改开发服务器端口
proxy: {
'/api': {
target: 'http://example.com', // 设置代理
changeOrigin: true,
pathRewrite: {
'^/api': ''
}
}
}
}
}

在这个例子中，vue.config.js 文件修改了项目的输出目录为 dist-custom，并将开发服务器的端口设置为 8080。

同时，它还设置了一个代理，将所有以 /api 开头的请求代理到 http://example.com。

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

最新评论