vue.config.js相关配置

使用vue/cli3以上版本的脚手架创建vue项目时,是没有vue.config.js这个文件的,需要手动在项目根目录新建这个文件,或者使用 package.json 中的 vue 字段 (JSON 格式)。vue.config.js相关配置_第1张图片
文件用module.exports导出,里面包含了一些配置。

module.exports = {
  //相关配置
}

以下是个人用的配置

const path = require('path')
module.exports = {
    publicPath: process.env.NODE_ENV === 'production' ? '../../static' : '.',

    // default
    outputDir: 'dist',

    // 放置静态资源(js、css、img、fonts)的相对于outputDir的目录
    assetsDir: '',

    // indexPath: 'index.html', // 指定生成的 index.html 的输出路径 (相对于 outputDir)。也可以是一个绝对路径,多页模式下在具体的每一个页面配置
    // 静态资源文件名哈希
    filenameHashing: true,
    // 多页应用
    pages: {
        homework: new PageReset('homework', '作业分享', 'view/share'),
        works: new PageReset('works', '作品分享', 'view/share')
    },

    // eslint在保存时是否检测代码
    lintOnSave: false,

    // 是否包含运行时编译器的 Vue 构建版本
    runtimeCompiler: false,

    // 是否需要生产环境的 source map
    productionSourceMap: true,

    // webpack额外的配置
    configureWebpack: {

    },

    // 开发服务器配置 https://webpack.js.org/configuration/dev-server/
    devServer: {
        public: '192.1.2.153',
        port: '8080',
        index: 'homework.html',
        proxy: {
            "/api": {
                target: "http://192.1.2.74:8081/edu/",
                pathRewrite: {
                    "^/api": ""
                },
                ws: true,
                changeOrigin: true
            }
        }
    },

    pluginOptions: {
        quasar: {
            theme: 'ios',
            importAll: true,
            i18n: 'zh-hans',
            framework: 'all'
        }
    },

    transpileDependencies: [
        /[\\\/]node_modules[\\\/]quasar-framework[\\\/]/
    ]
}

/**
 * 页面构造器
 * @param {String} name 页面名称
 * @param {String} title 页面title
 * @param {String} road 页面build时放置的路径地址
 */
function PageReset(name, title, road) {
    // page 的入口
    this.entry = `src/entry/${name}.js`
    // 模板来源
    this.template = process.env.NODE_ENV === 'production' ? 'public/jsp.html' : 'public/index.html'
    // 在 dist/index.html 的输出
    this.filename = process.env.NODE_ENV === 'production' ? path.join(__dirname, `${road}/${name}.jsp`) : `${name}.html`
    // 当使用 title 选项时,
    // template 中的 title 标签需要是 <%= htmlWebpackPlugin.options.title %>
    this.title = title
    // 在这个页面中包含的块,默认情况下会包含
    // 提取出来的通用 chunk 和 vendor chunk。
    this.chunks = ['chunk-vendors', 'chunk-common', name]
    this.minify = {
        removeComments: true,
        collapseWhitespace: true,
        keepClosingSlash: true,
        removeAttributeQuotes: false,
        caseSensitive: false,
        collapseBooleanAttributes: true
    }
    this.inject = process.env.NODE_ENV !== 'production'
}

上面包含了webpack相关配置,多页构造器以及跨域解决等,可根据项目自行更改。

具体配置可查看官网:

Vue CLI配置参考

你可能感兴趣的:(vue.config.js相关配置)