vue-cli 3.0 поддерживает быстрое чтение

Командная строка Webpack

Мой личный блог:Оригинальная ссылка

Vue-cli 3.0 использовался в последних проектах разработки.Можно сказать, что пользовательский опыт очень хороший.Шаблоны более настраиваемые, а конфигурация более лаконичная. Ниже приводится краткое изложение некоторого опыта в процессе подачи заявки.

Новый проект

# 安装
npm install -g @vue/cli

# 新建项目
vue create my-project

# 项目启动
npm run serve

# 打包
npm run build

Упакованный файл вводит предварительную загрузку (preload/prefetch), вводится при включении подключаемого модуля PWA.manifest/iconссылка и встраивает манифест среды выполнения / фрагмента веб-пакета для лучшей производительности.

Функциональная конфигурация

Выбор функций

功能选择

Версия 3.0 включаетПредустановленная конфигурация по умолчаниюа такжеПользовательская конфигурация, после того как пользователь настроит конфигурацию, он спросит, сохранить ли текущую функцию конфигурации в качестве предустановленного значения будущей конфигурации проекта, чтобы в следующий раз ее можно было использовать напрямую без перенастройки.

Конфигурация пользовательских функций включает следующие функции:

  • TypeScript
  • Progressive Web App (PWA) Support
  • Router
  • Vuex
  • CSS Pre-processors
  • Linter / Formatter
  • Unit Testing
  • E2E Testing

Различные функции могут быть настроены в соответствии с размером проекта и функциональным опытом,空格键поставить/снять отметку,按a键выбрать все/не выбирать все,按i键Отмените выбор выбранного элемента,上下键Переместить выделение вверх или вниз.

Конфигурация сведений о функциях

功能配置

После выбора функции запросит более подробную настройку,

  • Машинопись:
    • Использовать ли синтаксис компонента в стиле класса:Use class-style component syntax?
    • Использовать ли babel для побега:Use Babel alongside TypeScript for auto-detected polyfills?
  • Препроцессоры CSS:
    • Выберите тип предварительной обработки CSS:Pick a CSS pre-processor
  • Linter / Formatter
    • Выберите тип спецификации Linter/Formatter:Pick a linter / formatter config
    • Выберите режим lint, проверьте при сохранении/отметьте при отправке:Pick additional lint features
  • Testing
    • Выберите метод модульного тестирования
    • Выберите метод тестирования E2E
  • Выберите, где хранить пользовательские конфигурации, такие как Babel, Pustcss, Eslint и т. Д.Where do you prefer placing config for Babel, PostCSS, ESLint, etc.?

Пользовательская конфигурация Vue.config.js

vue.config.js полная конфигурация по умолчанию

module.exports = {
  // 基本路径
  baseUrl: '/',
  // 输出文件目录
  outputDir: 'dist',
  // eslint-loader 是否在保存的时候检查
  lintOnSave: true,
  // use the full build with in-browser compiler?
  // https://vuejs.org/v2/guide/installation.html#Runtime-Compiler-vs-Runtime-only
  compiler: false,
  // webpack配置
  // see https://github.com/vuejs/vue-cli/blob/dev/docs/webpack.md
  chainWebpack: () => {},
  configureWebpack: () => {},
  // vue-loader 配置项
  // https://vue-loader.vuejs.org/en/options.html
  vueLoader: {},
  // 生产环境是否生成 sourceMap 文件
  productionSourceMap: true,
  // css相关配置
  css: {
    // 是否使用css分离插件 ExtractTextPlugin
    extract: true,
    // 开启 CSS source maps?
    sourceMap: false,
    // css预设器配置项
    loaderOptions: {},
    // 启用 CSS modules for all css / pre-processor files.
    modules: false
  },
  // use thread-loader for babel & TS in production build
  // enabled by default if the machine has more than 1 cores
  parallel: require('os').cpus().length > 1,
  // 是否启用dll
  // See https://github.com/vuejs/vue-cli/blob/dev/docs/cli-service.md#dll-mode
  dll: false,
  // PWA 插件相关配置
  // see https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa
  pwa: {},
  // webpack-dev-server 相关配置
  devServer: {
    open: process.platform === 'darwin',
    host: '0.0.0.0',
    port: 8080,
    https: false,
    hotOnly: false,
    proxy: null, // 设置代理
    before: app => {}
  },
  // 第三方插件配置
  pluginOptions: {
    // ...
  }
}

установить прокси

# string
module.exports = {
  devServer: {
    proxy: '<url>'
  }
}

# Object
module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: '<url>',
        ws: true,
        changeOrigin: true
      },
      '/foo': {
        target: '<other_url>'
      }
    }
  }
}

включить DLL

включитьdllПосле этого файлы нашей динамической библиотеки генерируются путем упаковки каждый разvendorиз[chunkhash]значение будет одинаковым, его значение может бытьtrue/false, также можно сформулировать特定的代码库.

module.exports = {
  dll: true
}

module.exports = {
  dll: [
    'dep-a',
    'dep-b/some/nested/file.js'
  ]
}

статический путь к ресурсу

  • относительный путь

    • Пути статических ресурсов начинаются с@Начало представлять<projectRoot>/src
    • Пути статических ресурсов начинаются с~в начале вы можете импортироватьnode modulesресурсы внутри

  • publicСсылки на статические ресурсы в папках

      # 在 public/index.html中引用静态资源
  <%= webpackConfig.output.publicPath %>
  <link rel="shortcut icon" href="<%= webpackConfig.output.publicPath %>favicon.ico">

  # vue templates中，需要在data中定义baseUrl
  <template>
    <img :src="`${baseUrl}my-image.png`">
  </template>
  <script>
    data () {
      return {
        baseUrl: process.env.BASE_URL
      }
    }
  </script>

изменение конфигурации веб-пакета

использоватьwebpack-chainИзмените конфигурацию, связанную с веб-пакетом, настоятельно рекомендуется сначала ознакомиться с ней.webpack-chainа такжеисходный код vuecli, чтобы лучше понять элементы конфигурации этой опции.

  • Обработка конфигурации для модулей
// vue.config.js
module.exports = {
  chainWebpack: config => {
    config.module
      .rule('js')
        .include
          .add(/some-module-to-transpile/)  // 要处理的模块
  }
}
  • Изменить конфигурацию загрузчика webpack
// vue.config.js
module.exports = {
  chainWebpack: config => {
    config.module
      .rule('scss')
      .use('sass-loader')
      .tap(options =>
        merge(options, {
          includePaths: [path.resolve(__dirname, 'node_modules')],
        })
      )
  }
}
  • Изменить конфигурацию плагина webpack
// vue.config.js
module.exports = {
  chainWebpack: config => {
    config
      .plugin('html')
      .tap(args => {
        return [/* new args to pass to html-webpack-plugin's constructor */]
      })
  }
}

например: Этот проект небольшой, только дляuglifyjsНезначительные модификации для оптимизации конфигурации позже, если будут продолжать добавлять.

chainWebpack: config => {
    if (process.env.NODE_ENV === 'production') { 
        config
            .plugin('uglify')
            .tap(([options]) =>{
                // 去除 console.log
                return [Object.assign(options, {
                    uglifyOptions: { compress: {
                        drop_console : true,
                        pure_funcs: ['console.log']
                    }}
                })]
            })
    }
}

Глобальные настройки переменной

Создайте следующие проекты в корневом каталоге проекта:

.env                # 在所有环节中执行
.env.local          # 在所有环境中执行，git会ignored
.env.[mode]         # 只在特定环境执行( [mode] 可以是 "development", "production" or "test" )
.env.[mode].local   # 在特定环境执行, git会ignored


.env.development    # 只在生产环境执行
.env.production     # 只在开发环境执行

Настройте пары ключ-значение в файле:

# 键名须以VUE_APP开头
VUE_APP_SECRET=secret

Доступ в проекте:

console.log(process.env.VUE_APP_SECRET)

в таком проектеprocess.env.VUE_APP_SECRETбудетsecretЗаменены.

vue-cli 3 in terms of project performance has been quite a friendship, qualitative and private ownership is particularly strong, various configuration is particularly intimate, private preset can develop according to the project size and characteristics of the pre-build project in terms of efficiency значительно улучшилась.

заполнить яму

  1. бегатьnpm run serveПодскажите ошибку:error: You must pass the "decoratorsLegacy": true option to @babel/preset-stage-2
# 解决办法1： 在package.json中指定@babel/preset-stage-2版本
"devDependencies": {
  "@babel/preset-stage-2": "7.0.0-beta.44",
  ...
}

# 解决办法2： 修改.babelrc
{
  "presets": [
    ["@babel/preset-env", {
      "targets": {
        "browsers": [
          "> 5%",
          "last 2 versions",
          "not ie <= 8"
        ]
      },
      "modules": false,
      "exclude": [
        "transform-regenerator"
      ]
    }],
    ["@babel/preset-stage-2", {
      "useBuiltIns": true,
      "decoratorsLegacy": true
    }]
  ],
  "plugins": [
  ]
}
Категории