vue.config.js基本配置

最新推荐文章于 2024-06-11 16:11:21 发布
最新推荐文章于 2024-06-11 16:11:21 发布
阅读量3.9k 收藏 13
点赞数 1
分类专栏： vue 文章标签： vue.js javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_35496811/article/details/125305601
版权

方法一 (vue3)

vue.config.js 

const { defineConfig } = require('@vue/cli-service')

module.exports = defineConfig({
  transpileDependencies: true,
  lintOnSave: false,
  devServer: {
    port: 8080,
    host:'127.0.0.1',
    open: true,
    allowedHosts: '*'
  },
  publicPath: './',
  chainWebpack: config => {
    if (process.env.NODE_ENV === 'production') {
      // #region 忽略生成环境打包的文件
      var externals = {
        'vue': 'Vue',
        'axios': 'axios',
        'element-plus': 'ElementPlus',
        'vue-router': 'VueRouter',
        'vuex': 'Vuex',
        'nprogress': 'NProgress',
        'echarts': 'echarts'
      }
      config.externals(externals)

      // 在html文件中引入相关CDN
      const cdn = {
        css: [
          // element-ui css
          'https://unpkg.com/element-plus@2.1.7/dist/index.css',
          // nprogress
          'https://cdn.bootcdn.net/ajax/libs/nprogress/0.2.0/nprogress.min.css'
        ],
        js: [
          // vue
          'https://cdn.bootcdn.net/ajax/libs/vue/3.2.31/vue.runtime.global.prod.min.js',
          // vue-router
          'https://cdn.bootcdn.net/ajax/libs/vue-router/4.0.14/vue-router.global.prod.min.js',
          // vuex
          'https://cdn.bootcdn.net/ajax/libs/vuex/4.0.2/vuex.global.prod.min.js',
          // axios
          'https://cdn.bootcdn.net/ajax/libs/axios/0.26.1/axios.min.js',
          // element-plus
          'https://unpkg.com/element-plus@2.1.7/dist/index.full.min.js',
          // echarts
          'https://cdn.bootcdn.net/ajax/libs/echarts/5.3.1/echarts.common.min.js',
          // nprogress
          'https://cdn.bootcdn.net/ajax/libs/nprogress/0.2.0/nprogress.min.js',
          // core-js
          'https://cdn.bootcdn.net/ajax/libs/core-js/3.21.1/minified.min.js',
          // less
          'https://cdn.bootcdn.net/ajax/libs/less.js/4.1.2/less.min.js',
          // typescript
          'https://cdn.bootcdn.net/ajax/libs/typescript/4.3.5/typescript.min.js'
        ]
      }
      config.plugin('html').tap(args => {
        args[0].cdn = cdn
        return args
      })
    }

    config.when(process.env.NODE_ENV === 'development', config => {
      config.entry('app').clear().add('./src/main.ts')
      config.plugin('html').tap(args => {
        // args[0].isProd = false
        args[0].cdn = { css: [], js: [] }
        return args
      })
    })
  }
})

index.html

<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <% for(var css of htmlWebpackPlugin.options.cdn.css) { %>
      <link href="<%=css%>" rel="preload" as="style">
      <link rel="stylesheet" href="<%=css%>" as="style">
    <% } %>
    <% for(var js of htmlWebpackPlugin.options.cdn.js) { %>
      <link href="<%=js%>" rel="preload" as="script">
      <script src="<%=js%>"></script>
    <% } %>
    <title>document</title>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

方法二 (vue2)

 vue.config.js

module.exports = {
  devServer: {
    host:'127.0.0.1',
    port: 8000,
    open: true,
    disableHostCheck: true
  },
  publicPath: process.env.NODE_ENV === 'production'
    ? './'
    : '/',
  chainWebpack: config => {
    config.when(process.env.NODE_ENV === 'production', config => {
      config.entry('app').clear().add('./src/main-pro.js')
      config.set('externals', {
        vue: 'Vue',
        'vue-router': 'VueRouter',
        axios: 'axios',
        echarts: 'echarts',
        nprogress: 'NProgress',
        'vue-quill-editor': 'VueQuillEditor'
      })
      config.plugin('html').tap(args => {
        args[0].isProd = true
        return args
      })
    })
    config.when(process.env.NODE_ENV === 'development', config => {
      config.entry('app').clear().add('./src/main-dev.js')
      config.plugin('html').tap(args => {
        args[0].isProd = false
        return args
      })
    })
  }
}

index.html

<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title><%= htmlWebpackPlugin.options.isProd ? '' : 'dev - ' %>后台管理系统</title>
    <% if(htmlWebpackPlugin.options.isProd){ %>
    <!-- nprogress 的样式表文件 -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/nprogress/0.2.0/nprogress.min.css" />
    <!-- 富文本编辑器 的样式表文件 -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/quill/1.3.4/quill.core.min.css" />
    <link rel="stylesheet" href="https://cdn.staticfile.org/quill/1.3.4/quill.snow.min.css" />
    <link rel="stylesheet" href="https://cdn.staticfile.org/quill/1.3.4/quill.bubble.min.css" />
    <!-- element-ui 的样式表文件 -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.4.5/theme-chalk/index.css" />

    <script src="https://cdn.staticfile.org/vue/2.5.22/vue.min.js"></script>
    <script src="https://cdn.staticfile.org/vue-router/3.0.1/vue-router.min.js"></script>
    <script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
    <script src="https://cdn.staticfile.org/lodash.js/4.17.11/lodash.min.js"></script>
    <script src="https://cdn.staticfile.org/echarts/4.1.0/echarts.min.js"></script>
    <script src="https://cdn.staticfile.org/nprogress/0.2.0/nprogress.min.js"></script>
    <!-- 富文本编辑器的 js 文件 -->
    <script src="https://cdn.staticfile.org/quill/1.3.4/quill.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue-quill-editor@3.0.4/dist/vue-quill-editor.js"></script>

    <!-- element-ui 的 js 文件 -->
    <script src="https://cdn.staticfile.org/element-ui/2.4.5/index.js"></script>

    <% } %>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

 

（；￣ェ￣）。
关注
  • 1
    点赞
  • 踩
  • 13
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue.config.js 配置
weixin_48691904的博客
12-09 697
‘use strict’ const path = require(‘path’) const defaultSettings = require(’./src/settings.js’) function resolve(dir) { return path.join(__dirname, dir) } const name = defaultSettings.title || ‘文件’ // 标题 const port = process.env.port || process.env.npm_conf
vue.config.js的基础配置及说明
乡村的博客
10-29 1481
vue.config.js的基础配置及说明
vue配置vue.config.js
郝南过的博客
11-11 1万+
配置vue.config.js
vue3 defineComponent + 渲染函数h + 全局注册​
最新发布
徐同保的专栏
06-11 862
vue3 defineComponent + 渲染函数h + 全局注册​
vue.config.js 全局配置
m0_61177365的博客
07-29 4856
用法和 webpack 本身的 output.publicPath 一致，但是 Vue CLI 在一些其他地方也需要用到这个值，所以始终使用 publicPath 而不要直接修改 webpack 的 output.publicPath。例如，如果你的应用被部署在 https://www.my-app.com/my-app/，则设置。可以看出，开启productionSourceMap后，浏览器控制台明确的告诉我们test这条结果的输出语句在main.js的20行。所以，source map的作用就是定位。
初入Vue（二）-vue.config.js
develop_csdn的博客
08-05 3258
已下基于 Vue3.x 版本vue.config.js 是一个配置文件，存在与项目的根目录中。他会被 @vue/cli-service 自动加载。创建一个新项目，会有如下空配置： 该文件应该导出一个包含了选项的对象从 Vue CLI 3.3 起已弃用，现在都使用 publicPath默认值：'/'是部署应用包时的基本 URL，在 Vue CLI的其他地方也会使用这个值，默认情况下，Vue CLI 会假设你的应用是被部署在一个域名的根路径上，例如 https://www.qjdchina.com/。如果应
vue-cli 配置使用总结（新）
轻风细雨_林木木
07-25 3377
1什么是vue-cli2为什么会有多种`vue.config.js`配置？3vue.config.js的基ue.config.js风格一风格二4具体配置元素4-7pages4-24pwa5Babel6ESLintvue脚手架指的是vue-cli，它是一个专门为单页面应用快速搭建繁杂的脚手架，它可以轻松的创建新的应用程序而且可用于自动生成vue和webpack的项目模板。............
vue.config.js完整配置-超详细
05-26
在 Vue 项目中，`vue.config.js` 文件是一个可选的配置文件，它允许开发者自定义项目的各种设置，以满足特定需求。这个文件通常位于项目的根目录下，如果使用了 `@vue/cli` 创建的项目，那么在初始化时该文件可能不...
vue - vue.config.js中devServer配置方式
10-16
在Vue.js开发过程中，`vue.config.js` 文件是用于配置项目的，特别是对于开发环境的设置。其中，`devServer` 配置对象是至关重要的，因为它控制着开发服务器的行为，包括如何处理跨域请求、代理服务器设置以及端口...
如何配置vue.config.js 处理static文件夹下的静态文件
10-15
本文将详细介绍如何通过`vue.config.js`配置文件来确保静态文件在构建过程中被正确地复制到输出目录。 首先，我们要理解`vue.config.js`的作用。它是Vue CLI项目中的一个配置文件，允许我们自定义webpack配置，以...
vue.config.js中配置Vue的路径别名的方法
10-15
Vue CLI提供了一个名为`vue.config.js`的配置文件，允许我们自定义项目的构建设置，其中包括配置路径别名。以下将详细介绍如何在`vue.config.js`中设置Vue的路径别名。 首先，我们需要在项目的根目录下创建或编辑`...
解决Vue-cli3没有vue.config.js文件夹及配置vue项目域名的问题
01-21
vue.config.js配置文件： module.exports = { // 基本路径 baseURL已经过时 publicPath: './', // 输出文件目录 outputDir: 'dist', // eslint-loader 是否在保存的时候检查 lintOnSave: true, // use the ...
Vue2 系列：vue.config.js 参数配置
weixin_64684095的博客
06-29 9342
注意：其值应该是一个对象，对象的 key 是入口的名字，value 是：1.一个指定了 entry, template, filename, title 和 chunks 的对象 (除了 entry 之外都是可选的)；说明：部署应用包时的基本 URL，例：https://www.my-app.com/my-app/，则设置 publicPath 为 /my-app/说明：放置生成的静态资源 (js、css、img、fonts) 的 (相对于 outputDir 的) 目录。默认值：'index.html'
Vue学习-01
weixin_43386350的博客
03-07 796
Vue基本概念 vue是一个JavaScript渐进式框架 @vue/cli脚手架 Vue 指令
VUE3的vue.config.js配置详解 vue.config.js配置详解注释
热门推荐
执着
03-19 2万+
asset size limit: The following asset(s) exceed the recommended size limit (244 KiB). This can impact web performance.
从Vue-cli脚手架的基本使用到vue路由的基本使用
m0_62823653的博客
05-12 2872
第一部分：Vue-cli脚手架 vue2是对新手很友好的MVVM框架，有完善的官方中文文档，阅读起来也非常容易理解，由浅入 深，示例完整。同时官方也提供了一个开箱即用的vue-cli帮我们生成一个完整的项目框架 vue.js 著名的全家桶系列, 包含了， vue-router, vuex， axios，再加上 vue-cli 就是一个从 路由，数据流管理，http请求都有的核心项目，vue 社区的丰富资源，也是满足了我们日常开发中的需求了。 Vue-cli脚手架就是Npm的第三方包，全局安...
vue.config.js中的配置
m0_59338367的博客
09-10 2769
vue.config.js中的配置
vue vue.config.js 配置
11-03
Vue项目中的vue.config.js文件是一个可选的配置文件，如果项目的根目录中存在这个文件，那么它会被@vue/cli-service自动加载。在这个文件中，你可以对webpack进行自定义配置，例如修改webpack的默认配置、添加插件等...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值