Конфигурация VUE CLI 3

Vue.js

Предварительное знание

  • установка узла
  • npm(yarn,cnpm)
  • webpack(webpack-cli)

Проблемы, возникающие при использовании VUE CLI3

Обработка, совместимая с IE, удалить консоль

npm install @babel/polyfill -s
npm install transform-remove-console -s

// 在babel.config.js中配置如下
const plugins = []
if (process.env.NODE_ENV === 'production') {
  // 移除console.log
  plugins.push('transform-remove-console')
}
module.exports = {
  presets: [
    ['@vue/app', {
      polyfills: [
        'es6.array.iterator',
        'es6.promise',
        'es7.promise.finally',
        'es6.symbol',
        'es6.array.find-index',
        'es7.array.includes',
        'es6.string.includes',
        'es6.array.find',
        'es6.object.assign'
      ]
    }]
  ],
  plugins
}

Быстро создайте проект vue на основе vue-cli3.0

В этой главе подробно описано использование vue-cli3.0 для создания проектов. Проект, созданный с помощью vue-cli3.0 в этой главе, представляет собой файл шаблона на основе веб-пакета, и построенный проект принадлежит одностраничному (SPA) приложению. Поэтому последующие операции и инструкции в этом документе не подходят для построения многостраничного приложения.

По сравнению с предыдущими он имеет следующие преимущества:

  • Богатый функционал: встроенная поддержка babel, Typescript, ESLint...
  • Легко расширяемый: его система плагинов позволяет сообществу создавать и совместно использовать повторно используемые решения по запросу.
  • Нет необходимости в Eject: vue cli полностью настраивается, больше не нужно использовать конфигурацию веб-пакета.
  • Графический интерфейс CLI: графический интерфейс vue ui для создания, разработки и управления проектами
  • Мгновенное прототипирование: реализуйте новые идеи с помощью одного файла vue
  • Готовность к будущему: легко создавайте собственный код ES2015 для современных браузеров или создавайте свои компоненты vue как собственные веб-компоненты.

1. инициализация vue-cli3.0

установить @vue/кли

# npm install -g @vue/cli
OR
# yarn global add @vue/cli

Вы можете проверить его версию с помощью vue --version или vue -V

Меры предосторожности:

  • Имя пакета VUE CLI3 даетсяvue-cliизменить на@vue/cli. Если вы установили более старую версию vue-cli (1.x или 2.x), вы сначала проходитеnpm uninstall vue-cli -gилиyarn global remove vue-cliУдалите его.
  • Требуется VUE CLI3node8.9или更高版本(рекомендуется 8.11.0+)
  • Vue CLI3 и более ранние версии используют одни и те же команды vue, поэтому Vue CLI2 (vue-cli) переопределяется. Если вам все еще нужно использовать старую функциональность vue init, вам необходимо глобально установить инструмент моста:
npm install -g @vue/cli-init
Vue init webpack myVue

2. Создайте проект

можно использоватьvue uiСоздавайте и управляйте проектами в графическом интерфейсе, который здесь не объясняется, проверьте самиcli.vuejs.org/, создается в виде командной строки:

vue create vuedemo

Вам будет предложено выбрать пресет. Вы можете выбрать предустановку по умолчанию, которая содержит основные настройки Babel+ESLint, или вы можете выбрать手动选择特性чтобы выбрать нужную функцию.

Эта настройка по умолчанию отлично подходит для быстрого прототипирования нового проекта, в то время как ручная настройка предоставляет больше параметров, которые более необходимы для проектов, ориентированных на производство.В качестве примера возьмем «ручную настройку».以上下键移动，以空格键进行是否选定

  • Babel: компилировать ES6 в ES5
  • TypeScript: надмножество типов javascript
  • Поддержка прогрессивных веб-приложений (PWA): поддержка прогрессивных веб-приложений.
  • Router:vue-router
  • Vuex: управление состоянием
  • Препроцессоры CSS: Препроцессоры CSS
  • Линтер/Форматтер: Спецификация разработки
  • Модульное тестирование: Модульное тестирование
  • E2E-тестирование: сквозное тестирование

Если позже вы захотите установить плагин в уже созданный проект, вы можете использовать команду vue add:

D:\i\vuedemo> vue add vuex

Если появляются вышеуказанные слова, установка прошла успешно. пожалуйста, введите командуcd vuedemoиyarn serveрабочая среда.

3. Описание конфигурационного файла

vue-cli3.0 стремится к стандартизации базы инструментов в экосистеме Vue. Это гарантирует, что различные инструменты сборки могут плавно подключаться на основе интеллектуальной конфигурации по умолчанию, поэтому вы можете сосредоточиться на написании приложений и сократить время настройки. Глядя на следующие файлы, вы обнаружите, что он меньше, чем vue-cli2.0.buildиconfigпапку, поэтому vue-cli3 предоставляет необязательный файл конфигурации -vue.config.js. Подробности см. в пунктах 4 и 5 (конфигурация упаковки) Здесь подробно объясняется только функция файла.

|-- dist                       # 打包后文件夹	        
|-- public                     # 静态文件夹         		                  
|   |-- favicon.ico				
|   |-- index.html					#入口页面
|-- src                        # 源码目录         
|   |--assets						# 模块资源
|   |--components					# vue公共组件
|   |--views 						
|   |--App.vue                                          # 页面入口文件
|   |--main.js	                                        # 入口文件，加载公共组件
|   |--router.js                                        # 路由配置
|   |--store.js	                                        # 状态管理
|-- .env.pre-release          # 预发布环境    
|-- .env.production	      # 生产环境       
|-- .env.test		      # 测试环境  
|-- vue.config.js             # 配置文件 
|-- .eslintrc.js    		  	# ES-lint校验                   
|-- .gitignore          		# git忽略上传的文件格式   
|-- babel.config.js   			# babel语法编译                        
|-- package.json       	     # 项目基本信息 
|-- postcss.config.js   	 	# CSS预处理器(此处默认启用autoprefixer)

4. Конфигурация vue.config.js

Vue.config.js — необязательный файл конфигурации, если этот файл существует в корневом каталоге проекта, он будет@vue/cli-serviceАвтозагрузка. Вы также можете использовать поле vue в package.json, но будьте осторожны и записывайте его строго в формате JSON. Здесь для обработки используется метод настройки vue.config.js.

const webpack = require('webpack')
module.exports = {
    //部署应用包时的基本 URL
    publicPath: process.env.NODE_ENV === 'production' ? '/online/' : './',
    //当运行 vue-cli-service build 时生成的生产环境构建文件的目录
    outputDir: 'dist',
    //放置生成的静态资源 (js、css、img、fonts) 的 (相对于 outputDir 的) 目录
    assetsDir: 'assets',
    // eslint-loader 是否在保存的时候检查 安装@vue/cli-plugin-eslint有效
    lintOnSave: true,
    //是否使用包含运行时编译器的 Vue 构建版本。设置true后你就可以在使用template
    runtimeCompiler: true,
    // 生产环境是否生成 sourceMap 文件 sourceMap的详解请看末尾  
    productionSourceMap: true,
    
    //允许我们更细粒度的控制 webpack 的内部配置,例如：以下操作我们可以成功修改 webpack 中 module 项里配置 rules 规则为图片下的 url-loader 值，将其 limit 限制改为 5M
    chainWebpack: config => {
        config.module.rule("images")
        .use("url-loader")
        .tap(options =>
        merge(options, {
        limit: 5120
    }));
    },
    //可以在正式环境下关闭错误报告 console.log...
    configureWebpack: config => { 
        if (process.env.NODE_ENV === 'production') {
            // 为生产环境修改配置...
        } else {
            // 为开发环境修改配置...
        }
    },
    // css相关配置
    css: {
        // 是否使用css分离插件 ExtractTextPlugin 生产环境下是true,开发环境下是false
        extract: true,
        // 开启 CSS source maps?
        sourceMap: false,
        // css预设器配置项
        loaderOptions: {},
        // 启用 CSS modules for all css / pre-processor files.
        modules: false
    },
    // webpack-dev-server 相关配置
    devServer: { // 设置代理
        hot: true, //热加载
        host: '0.0.0.0', //ip地址
        port: 8085, //端口
        https: false, //false关闭https，true为开启
        open: true, //自动打开浏览器
        proxy: {
            '/api': { //本地                                        
            target: 'http://192.168.102.13:8080/',
            // 如果要代理 websockets
            ws: true,
            changeOrigin: true
      },
      '/test': { //测试
        target: 'http://172.22.0.58:8082/'
      },
      '/pre-release': {  //预发布
        target: 'http://XXX.com/'
      },
      '/production': { //正式
        target: 'http://XXX.com/'
      }
        }
    },
    pluginOptions: { // 第三方插件配置
        // ...
    }
}

расширение:

Роль исходной карты: Обработка упакованного кода представляет собой информационный файл, в котором хранится информация о местоположении. То есть каждая позиция преобразованного кода соответствует позиции до преобразования. С ним, когда что-то пойдет не так, отладчик будет отображать исходный код напрямую вместо преобразованного кода. Это, несомненно, приносит большое удобство разработчикам.

5. Конфигурация упаковки

При разработке реального проекта мы обычно проходим стадию разработки, стадию тестирования, стадию предварительного выпуска и стадию финального запуска проекта.Требования к коду проекта на каждой стадии могут быть разными, так как мы можем это сделать легко на разных этапах?Как насчет того, чтобы наш проект выглядел по-разному и использовал разные функции? Здесь необходимо представить环境Концепция чего-либо.

Как правило, проект будет иметь следующие четыре среды:

  • Среда разработки (этап разработки, локальная версия разработки, обычно используются какие-то средства отладки или дополнительные вспомогательные функции)
  • Тестовая среда (стадия тестирования, предстартовая версия, за исключением некоторых исправлений ошибок, в принципе не сильно отличается от онлайн-версии)
  • Предрелизная среда (скоро, предстартовая версия, прогнозирование возможности проблем онлайн, ничем не отличается от онлайн-версии)
  • Рабочая среда (этап онлайн, официально выпущенная версия в целом будет оптимизирована, а отчеты об ошибках будут отключены)

Как разработчику, нам может понадобиться написать различный код для каждой среды и убедиться, что код работает в правильной среде, что требует от нас правильной настройки среды и управления ею.

Создайте.env.testфайл, содержание файла следующее

NODE_ENV='test'                    # 测试环境
VUE_APP_TT='TT'

Создайте файл .env.pre-release со следующим содержимым:

NODE_ENV='pre-release'              # 预发布环境

Создайте файл .env.production со следующим содержимым:

NODE_ENV='production'              # 正式环境
VUE_APP_T='la'
Q='1'
Конфигурация package.json
"scripts": {
    "serve": "vue-cli-service serve ",
    "build:pre": "vue-cli-service build --mode pre-release",  #预发布环境
    "build:test": "vue-cli-service build --mode test", #测试环境
    "build:prod": "vue-cli-service build --mode production", #正式环境
    "lint": "vue-cli-service lint",
    "test:unit": "vue-cli-service test:unit"
}

Уведомление:

  • Использование в vue.config.jsprocess.env.[name]Просто получите доступ
// vue.config.js

console.log(process.env.NODE_ENV); // development（在终端输出）
  • Когда вы запустите команду подачи пряжи, вы обнаружите, что вывод — это разработка, потому что среда по умолчанию для команды подачи vue-cli-service — это разработка Вам необходимо изменить сценарий подачи в package.json Команда:
"scripts": {
"serve": "vue-cli-service serve --mode test",
}
#--mode test其实就是修改了 webpack 4 中的 mode 配置项为 test，同时其会读取对应 .env.[model]文件下的配置，如果没找到对应配置文件，其会使用默认环境 development，同样 vue-cli-service build 会使用默认环境 production。
Примечание о переменных окружения
  • Имя среды должно соответствовать файлу среды.
  • Файлы окружения помещаются в корневой каталог
  • КромеbaseUrlиNODE_ENVИспользование других переменных средыVUE_APPначало

6. Междоменная обработка проектов развертывания

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

Первое решение состоит в том, чтобы увеличить совместное использование ресурсов между доменами CORS в серверной части. Коды Java и .Net отличаются, но обычно считается, что для установки свойств, связанных с «источником», в протоколе Http.

Второй метод заключается в настройке внутреннего HTTP-сервера для фильтрации всех HTTP-запросов и увеличения совместного использования ресурсов CORS между доменами.

Фронтенд-разработка не может быть задействована ни одним из этих двух методов, и необходимо общаться с разработчиками, предоставляемыми серверной службой, а также с эксплуатацией и обслуживанием службы развертывания.

адрес гитхаба:GitHub.com/Mr-Incentive/v UE…

Пожалуйста, выскажите свое мнение, проверьте наличие упущений и заполните пробелы, а также, пожалуйста, выскажите свое мнение о любых недостатках. Ба, документ надо передать вождю---

Категории