How to import modules in a file vue

Import modules in files

Since it is a script file read by Webpack when building the project,

The import syntax is only valid in the ES module.

Therefore, it cannot be used directly inimportTo import the module,

You can use CommonJSrequireTo import the module, as follows:

// 
const constant = require('./src/utils/constant')
(constant.BASE_URL);

The corresponding export module should be written as:

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

Document introduction in vue project

is an optional configuration file. If this file is not in the root directory of the project, the Vue CLI will use the default configuration.

The main purpose of this file is to enable developers to adjust the default configuration of projects generated by Vue CLI.

An object containing configuration options should be exported.

These configuration options include, but are not limited to:

• publicPath: Specify the basic URL when deploying the application.
• outputDir: Specify the output directory (dist).
• assetsDir: Specify a static resource directory other than （relative to outputDir）.
• indexPath: Specifies the generated output path (relative to outputDir).
• lintOnSave: Whether to check and fix lint errors when saving.
• chainWebpack: An advanced option that allows you to use webpack-chain to make finer-grain modifications.
• configureWebpack: If the project'swebpackThis function is used when configuration requires finer granular modifications.
• devServer: Modify the webpack-dev-server configuration.
• css、parallel、pluginOptionsetc.

This file is usually located in the root directory of the project, withFile level.

It allows developers to flexibly customize projects generated by Vue CLI to meet specific project needs or workflows.

For example, you can modify the project's output directory through files, or adjust the configuration of webpack-dev-server to use specific proxy settings or port numbers during development.

// 
 = {
outputDir: 'dist-custom', // Modify the output directorydevServer: {
port: 8080, // Modify the development server portproxy: {
'/api': {
target: '', // Set up a proxychangeOrigin: true,
pathRewrite: {
'^/api': ''
}
}
}
}
}

In this example, the file modified the project's output directory to dist-custom and set the port of the development server to 8080.

At the same time, it also sets up a proxy to proxy all requests starting with /api to .

Summarize

The above is personal experience. I hope you can give you a reference and I hope you can support me more.