vue3.0 vue.config.js配置

搭建好脚手架会发现,对比vue2.0版本少了build、webpack等的配置。

vue cli3.0项目中需要配置其他参数时,需要新建文件‘vue.config.js‘,与package.json在同一级目录下。

module.exports = {
  // 项目部署的基础路径
  // 我们默认假设你的应用将会部署在域名的根部,
  // 比如 https://www.my-app.com/
  // 如果你的应用时部署在一个子路径下,那么你需要在这里
  // 指定子路径。比如,如果你的应用部署在
  // https://www.foobar.com/my-app/
  // 那么将这个值改为 `/my-app/`
  baseUrl: ‘/Reader/dist/‘, 

  // 将构建好的文件输出到哪里
  outputDir: ‘dist‘,

  // 放置静态资源的地方 (js/css/img/font/...)
  assetsDir: ‘‘,

  // 用于多页配置,默认是 undefined
  pages: {
    index: {
      // 入口文件
      entry: ‘src/main.js‘,  /*这个是根入口文件*/
      // 模板文件
      template: ‘public/index.html‘,
      // 输出文件
      filename: ‘index.html‘,
      // 页面title
      title: ‘Index Page‘
    },
    // 简写格式
    // 模板文件默认是 `public/subpage.html`
    // 如果不存在,就是 `public/index.html`.
    // 输出文件默认是 `subpage.html`.
    subpage: ‘src/main.js‘    /*注意这个是*/
  },

  // 是否在保存的时候使用 `eslint-loader` 进行检查。
  // 有效的值:`ture` | `false` | `"error"`
  // 当设置为 `"error"` 时,检查出的错误会触发编译失败。
  lintOnSave: true,

  // 使用带有浏览器内编译器的完整构建版本
  // 查阅 https://cn.vuejs.org/v2/guide/installation.html#运行时-编译器-vs-只包含运行时
  runtimeCompiler: false,

  // babel-loader 默认会跳过 node_modules 依赖。
  // 通过这个选项可以显式转译一个依赖。
  transpileDependencies: [/* string or regex */],

  // 是否为生产环境构建生成 source map?
  productionSourceMap: true,

  // 调整内部的 webpack 配置。
  // 查阅 https://github.com/vuejs/vue-docs-zh-cn/blob/master/vue-cli/webpack.md
  chainWebpack: () => {},
  configureWebpack: () => {},

  // CSS 相关选项
  css: {
    // 将组件内的 CSS 提取到一个单独的 CSS 文件 (只用在生产环境中)
    // 也可以是一个传递给 `extract-text-webpack-plugin` 的选项对象
    extract: true,

    // 是否开启 CSS source map?
    sourceMap: false,

    // 为预处理器的 loader 传递自定义选项。比如传递给
    // sass-loader 时,使用 `{ sass: { ... } }`。
    loaderOptions: {},

    // 为所有的 CSS 及其预处理文件开启 CSS Modules。
    // 这个选项不会影响 `*.vue` 文件。
    modules: false
  },

  // 在生产环境下为 Babel 和 TypeScript 使用 `thread-loader`
  // 在多核机器下会默认开启。
  parallel: require(‘os‘).cpus().length > 1,

  // PWA 插件的选项。
  // 查阅 https://github.com/vuejs/vue-docs-zh-cn/blob/master/vue-cli-plugin-pwa/README.md
  pwa: {},

  // 配置 webpack-dev-server 行为。
  devServer: {
    open: process.platform === ‘darwin‘,
    host: ‘0.0.0.0‘,
    port: 8080,
    https: false,
    hotOnly: false,
    // 查阅 https://github.com/vuejs/vue-docs-zh-cn/blob/master/vue-cli/cli-service.md#配置代理
    proxy: null, // string | Object
    before: app => {}
  },

  // 三方插件的选项
  pluginOptions: {
    // ...
  }
}

原文地址:https://www.cnblogs.com/lsyy2017/p/12200654.html

时间: 2024-07-30 21:57:17

vue3.0 vue.config.js配置的相关文章

vue-cli3 vue.config.js配置

vue-cli3推崇零配置,其图形化项目管理也很高大上. 但是vue-cli3推崇零配置的话,导致了跟之前vue-cli2的配置方式都不一样了. 别名设置,sourcemap控制,输入文件位置和输出文件位置和输出的方式,压缩js控制,打包webapck日志分析,externals忽略配置(外部引入),调试的端口配置,proxy接口配置等等的. 有时候还需要我们配置的,因为官方推荐的,并不适用于我们平时的开发所用的. 所以,我的vue.config.js配置是下面这样的.还有一个改hash的配置,

【vue-cli 3.0】 vue.config.js配置 - 路径别名

如何配置vue-cli 3中vue.config.js的路径别名? 前段时间更新电脑重装了一下vue-cli,发现了vue-cli已经更新到3.0版.用来搭建项目后发现简化了很多,而且配置文件现在可以全部统一在vue.config.js中,很方便有没有,从此以后一个配置文件走遍公司大小项目,妈妈再也不用担心我每次新建项目时重新配置各个复杂的选项了.那么怎么在vue.config.js中配置路径别名呢? 1. 创建项目 2. 在根目录下新建 vue.config.js 3. 修改vue.confi

vue cli3之vue.config.js配置

const path = require('path') function resolve(dir) { return path.join(__dirname, dir) } module.exports = { // publicPath: process.env.NODE_ENV === 'production'?'/':'/', // i18n chainWebpack: config => { config.module .rule('i18n') .resourceQuery(/blo

vue.config.js 极简化配置 参考!

前提: 在开发环境下,axios.defaults.baseURL = '', 即不设置axios的前缀 ! 方法一: 这个是接口在开发环境中的接口形式,以/api 形式开头. 然后vue.config.js 配置如下 module.exports = { publicPath: '', // 为空,则项目可放在服务器任何位置 outputDir: "../teamemory", //打包后的文件夹名字及路径 devServer: { // 开发环境跨域情况的代理配置 proxy: {

vue.config.js常用配置

/ vue.config.js 常用配置 module.exports = { // 基本路路径, vue.cli 3.3以前请使用baseUrl publicPath: '/', // 输出文件目录 outputDir: 'dist', // ?用于嵌套生成的静态资产(js,css,img,fonts)的目录. assetsDir: '', // ?生产环境sourceMap productionSourceMap: true, // webpack配置 configureWebpack: (

vue-cli3 vue.config.js常用的配置

基础: module.exports = { // 选项... } 使用publicPath找到服务端的路径 ( 后端api和项目在同一目录下 ) module.exports = { publicPath: './' } 构建项目时打包的位置 module.exports = { outputDir: 'dist', } eslint代码检测 lintOnSave : ture | false | 'error' devserve相关配置 devServer: { open: true,//设

vue cli 3 查看项目 vue.config.js 的默认配置信息

vue cli 3 查看项目 vue.config.js 的默认配置信息 运行命令,在终端输出: npx vue-cli-service inspect 运行命令,将输出导入到文件:vue.config.detail.js: npx vue-cli-service inspect >> vue.config.detail.js 在文件:vue.config.detail.js 开头,添加:module.exports =,然后格式化即可查看. 原文地址:https://www.cnblogs.

@vue/cl构建得项目下,postcss.config.js配置,将px转化成rem

依赖包: postcss-pxtorem 配置: 在项目根目录下创建 postcss.config.js 配置如下: module.exports = () => ({ plugins: [ require('autoprefixer')(), // require('postcss-px2rem')({ remUnit: 75 }) require('postcss-pxtorem')({ rootValue: 37.5, propList: ['*'] }) ]}); rootValue (

vue.config.js模板

关于vue cli3.0中vue.config.js的配置,我看着官网走了一遍,整理了一下,因为配置项比较多,所以有的我就没放,给出了链接.(可以看链接里面自己配置哦) // vue.config.js module.exports = { // type :string defalut :"/" // 把开发服务器架设在根路径 publicPath: process.env.NODE_ENV === 'produvtion' ? '/production-sub-path/' : '