Vue 配置 vue.config.js 导航

在 Vue 项目中，vue.config.js 文件是配置项目和优化工具链的重要入口。通过合理配置，可以优化构建工具链，简化开发流程，并为项目打包和部署提供个性化设置。

路径配置

在 Vue CLI 3.x 中，路径配置主要依赖于 path 模块进行处理。为了方便项目成员相对路径的管理，可以使用 path.join 方法拼接路径。

示例代码

const path = require('path');
function resolve(dir) {
    return path.join(__dirname, dir);
}
module.exports = {
    lintOnSave: true,
    chainWebpack(config) {
        config.resolve.alias
            .set('@', resolve('src'))
            .set('@assets', resolve('src/assets'))
            .set('@components', resolve('src/components'))
            .set('@content', resolve('src/components/content'))
            .set('@common', resolve('src/components/common'))
            .set('@network', resolve('src/network'))
            .set('@views', resolve('src/views'));
        // 适当添加其他路径 Ihrer项目中需要的
    }
};

自定义打包入口文件

通过 chainWebpack 方法可以对不同环境下的打包入口文件进行自定义设置。此外，process.env.NODE_ENV 可以根据开发和生产环境切换配置。

chainWebpack(config) {
    config.when(process.env.NODE_ENV === 'production', config => {
        config.entry('app').clear().add('./src/main-prod.js')
    });
    config.when(process.env.NODE_ENV === 'development', config => {
        config.entry('app').clear().add('./src/main-dev.js')
    });
}

输出目录设置

outputDir 主要是用来指定构建后的文件存储路径。默认值为 dist，即可更改为生产环境需要的格式。

参数说明

类型：string

默认值：dist

示例

module.exports = {
    publicPath: './', // 生产环境下的基本路径设置
    outputDir: 'dist', // 构建文件的保存目录
    // ...
}

请注意，outputDir 需要与 publicPath 保持一致，这样可以正确生成项目部署路径。

静态资源存储

可以通过 assetsDir 配置静态资源存储位置。资源会被存放在构建后的项目目录下的相应子目录内。

assetsDir: 'assets',

配置总结

核心选项解析

explicit casting：为了更谨慎地控制构建过程，可以使用 use(value) 来强制一个类型的值。

publicPath：用于指定在某种编译环境下生成的公用路径，通常用于 Basicsulf flooring 的处理。

filenameHashing：默认情况下，构建后的 JavaScript 和 CSS 文件名中会自动生成唯一的哈希值。

欢迎根据项目需求，补充其他必要的配置！

转载地址：http://ynomz.baihongyu.com/

你可能感兴趣的文章