базовая конфигурация vue-cli и модификация конфигурации webpack

Vue.js

строительные леса

Scaffolding помогает нам обрабатывать веб-пакеты и другие связанные конфигурации.Нам нужно только быстро собрать проект на основе скаффолдинга (проект должен содержать конфигурации, связанные с веб-пакетом)

леса vue vue-cli

Первый шаг, который мы используем для чего-либо, это установка

1. Установите строительные леса (обычно устанавливаются глобально)

//=>用npm安装
$npm install @vue/cli -g
//=>用yarn安装
$yarn global add @vue/cli

После успешной установки глобальная среда сгенерирует исполняемую команду $vue, мы можем проверить номер версии на основе $vue --version, чтобы убедиться, что установка прошла успешно.

2. Создайте инженерный проект

$vue create [项目名称](要遵循npm包的名称规范:数字或者小写字母)

Первый элемент — это конфигурация, которую я создал и сохранил ранее, если это первый раз, то есть второй и третий элементы.

  • default (babel,eslint): выберите элемент конфигурации по умолчанию (установите необходимые модули и настройте их позже)
  • Ручной выбор функций : Ручной выбор элементов конфигурации

Если вы выбрали значение по умолчанию, эта статья не имеет смысла, мы решили вручную выбрать элементы конфигурации.

Здесь выбираем конфигурацию вебпака в скаффолдинге, пробел это выбор, я выбрал вышеперечисленные пункты, при необходимости добавьте или уберите сами

  • babel (babel-preset-vue-app): новейшие функции ECMAScript для babel-preset-env, генератор конвертации Vue JSX, async/await и т. д.
  • Маршрутизатор: официальный менеджер маршрутизации Vue.
  • Vuex: плагин для реализации публичного управления состоянием в Vue (обработка обмена информацией между компонентами).
  • Препроцессоры CSS: препроцессоры CSS (SASS/LESS/Stylus)
  • Линтер/Форматтер: проверка синтаксиса eslint
  • Модульное тестирование: модульное тестирование
  • E2E-тестирование: сквозное тестирование

Использовать ли режим истории маршрутизатора, выберите Y; выберите, какие правила конфигурации языка предварительной обработки CSS, я использую меньше, чтобы выбрать в соответствии с моими потребностями

Выберите автоматическое определение форматирования кода, я использую vscode для выбора ESLint+Prettier

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

  • Первый вариант — поместить информацию о конфигурации в отдельный файл.
  • Второй пункт — поместить его в package.json

Созданный каталог проекта

  • src : исходный файл разработки проекта.
    • main.js: упакованный и скомпилированный входной файл
    • App.vue: файл входа для страницы проекта.
    • компоненты: хранить общедоступные компоненты текущего проекта
      • xxx.vue
    • активы: обычно хранят файлы статических ресурсов, которые необходимо импортировать в проект.
      • xxx.png
      • xxx.css
  • public
    • index.html : главная страница текущего проекта, мы окончательно компилируем и рендерим весь контент, написанный в src, через webpack и vue, и, наконец, рендерим его в контейнере #app в index.html
    • xxx.xx : Иногда некоторые наши ресурсы могут быть указаны в index.html отдельно, и помещаться в эту папку, но помимо таких ресурсов при разработке, остальные рекомендуется размещать в папке src

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

$npm run serve 或者 $yarn serve

В производственном режиме скомпилируйте и упакуйте написанный контент и, наконец, разверните его на сервере.

$npm run build 或者 $yarn build

Другие команды vue-cli

$vue inspect 查看当前项目默认的webpack配置信息
$vue add [plugin] 在当前项目中安装插件

$vue ui: создание и управление проектами с графическим интерфейсом

откроет окно браузера и графически проведет вас через процесс создания проекта

$vue create --help : вы можете просмотреть команды в vue

Чуть глубже в vue-cli

После создания проекта в конфигурации по умолчанию уже настроены правила типа less/sass.Если нам нужно использовать less в нашем проекте, нет необходимости настраивать правила, достаточно установить соответствующие модули и загрузчики.

$yarn add less less-loader -D

<script>
    impoer './xxx/xxx.xx' //=>导入需要的模块
</script>

<style lang="less">
    ...../
</style>

Изменить конфигурацию веб-пакета по умолчанию

  • Вам необходимо создать файл vue.config.js в корневом каталоге и изменить соответствующую конфигурацию в этом файле.Следующий код предназначен для изменения соответствующей конфигурации веб-пакета.
    module.exports = {
	//=>process.env.NODE_ENV：环境变量中存储的是开发环境还是生产环境
	publicPath: process.env.NODE_ENV === 'production' ? 'http://www.xxx.cn/' : '/',
	//=>outputDir
	//=>自定义目录名称，把生成的JS/CSS/图片等静态资源放置到这个目录中
	assetsDir: 'assets',
	//=>关闭生产环境下的资源映射（生产环境下不在创建xxx.js.map文件）
	productionSourceMap: false,
	//=>设置一些webpack配置项，用这些配置项和默认的配置项合并
	configureWebpack: {
		plugins: []
	},
	//=>直接去修改内置的webpack配置项
	chainWebpack: config => {
		//=>config:原始配置信息对象
		config.module
			.rule('images')
			.use('url-loader')
			.loader('url-loader')
			.tap(options => {
				options.limit = 200 * 1024;
				return options;
			});
	},
	//=>修改webpack-dev-server配置（尤其是跨域代理）
	devServer: {
		proxy: {
			//请求地址  /user/add
			//代理地址  http://api.xxx.cn/user/add
			"/": {
				changeOrigin: true,
				target: "http://api.xxx.cn/"
			}
		}
	},
	//=>多余1核cpu时：启动并行压缩
	parallel: require('os').cpus().length > 1
    }

наконец

  • Если что-то не так, укажите
Категории