vue.config.js常用配置详解
(编辑:jimmy 日期: 2024/11/27 浏览:3 次 )
使用vue-cli3.0搭建项目比之前更简洁,没有了build和config文件夹。
vue-cli3的一些服务配置都迁移到CLI Service里面了,对于一些基础配置和一些扩展配置需要在根目录新建一个vue.config.js文件进行配置
module.exports = { // 选项... }
基本路径
baseUrl从 Vue CLI 3.3 起已弃用使用publicPath来替代。
在开发环境下,如果想把开发服务器架设在根路径,可以使用一个条件式的值
module.exports = { publicPath: process.env.NODE_ENV === 'production' "htmlcode">module.exports = { outputDir: 'dist', }静态资源目录
assetsDir
放置生成的静态资源 (js、css、img、fonts) 的目录
module.exports = { assetsDir: 'assets', }eslint代码检测
是否开启eslint保存检测,有效值:ture | false | 'error'
设置为 true 时,eslint-loader 会将 lint 错误输出为编译警告。默认情况下,警告仅仅会被输出到命令行,且不会使得编译失败
希望让 lint 错误在开发时直接显示在浏览器中,可以使用 lintOnSave: 'error'。这会强制 eslint-loader 将 lint 错误输出为编译错误
webpack-dev-server 相关配置
devServer
devServer: { open: true,//设置自动打开 port: 1880,//设置端口 proxy: { //设置代理 '/axios': { target: 'http://101.15.22.98', changeOrigin: true, secure: false, //如果是http接口,需要配置该参数 pathRewrite: { '^/axios': '' } } } } }module.exports = { // 部署应用时的基本 URL publicPath: process.env.NODE_ENV === 'production' "stylesheet"> 和 <script> 标签的 crossorigin 属性(注:仅影响构建时注入的标签) crossorigin: '', // 在生成的 HTML 中的 <link rel="stylesheet"> 和 <script> 标签上启用 Subresource Integrity (SRI) integrity: false, // 如果这个值是一个对象,则会通过 webpack-merge 合并到最终的配置中 // 如果你需要基于环境有条件地配置行为,或者想要直接修改配置,那就换成一个函数 (该函数会在环境变量被设置之后懒执行)。该方法的第一个参数会收到已经解析好的配置。在函数内,你可以直接修改配置,或者返回一个将会被合并的对象 configureWebpack: {}, // 对内部的 webpack 配置(比如修改、增加Loader选项)(链式操作) chainWebpack: () =>{ }, // css的处理 css: { // 当为true时,css文件名可省略 module 默认为 false modules: true, // 是否将组件中的 CSS 提取至一个独立的 CSS 文件中,当作为一个库构建时,你也可以将其设置为 false 免得用户自己导入 CSS // 默认生产环境下是 true,开发环境下是 false extract: false, // 是否为 CSS 开启 source map。设置为 true 之后可能会影响构建的性能 sourceMap: false, //向 CSS 相关的 loader 传递选项(支持 css-loader postcss-loader sass-loader less-loader stylus-loader) loaderOptions: { css: {}, less: {} } }, // 所有 webpack-dev-server 的选项都支持 devServer: {}, // 是否为 Babel 或 TypeScript 使用 thread-loader parallel: require('os').cpus().length > 1, // 向 PWA 插件传递选项 pwa: {}, // 可以用来传递任何第三方插件选项 pluginOptions: {} }参考:https://www.jb51.net/article/146152.htm
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
下一篇:解决vue项目中页面调用数据 在数据加载完毕之前出现undefined问题