Слияние кода завершено, страница обновится автоматически
На основе приложения, созданного с помощью команды vue init webpack версии vue-cli 2. 9. 3, было выполнено преобразование в многопримерное приложение. При этом процесс создания страниц аналогичен созданию одностраничного приложения Vue, а также обеспечивается совместимость с модулем одностраничного приложения vue-router.
Страницы можно создавать в директории src/views. Например, директория index, которая должна содержать два файла: index.html как основной шаблон, и title.js для конфигурации заголовка.
app.js
App.vue
Директория должна содержать .html, .js и .vue файлы, где последний является входным файлом.
При запуске npm run dev проект будет доступен по адресу http://localhost:8080.
# Установите зависимости
npm install
# Запустите с горячей перезагрузкой на http://localhost:8080/index.html
npm run dev
# Соберите для продакшена с минификацией
npm run build
# После сборки вы можете запустить локальный сервер для просмотра
# Запустите с горячей перезагрузкой на http://localhost:2333
node server
Примеры модификаций Webpack для Vue:```javascript function getEntries(path) { let entries = {}; glob.sync(path).forEach((entry) => { if (/views/(.+[^.html])/.test(entry)) { entries[RegExp.$1.slice(0, RegExp.$1.lastIndexOf('/') - 1)] = entry; } }); return entries; } }
```javascript
for (let pathname in entry) {
let filename = pathname.replace('views/', '');
let conf = {
filename: filename === 'index' ?
`${filename}.html` :
`${filename}/index.html`,
template: entry[pathname],
inject: true,
minify: {
removeComments: true,
collapseWhitespace: true,
removeAttributeQuotes: true
},
chunksSortMode: 'dependency'
};
if (pathname in devWebpackConfig.entry) {
conf.chunks = ['manifest', 'vendor', pathname];
conf.hash = true;
}
devWebpackConfig.plugins.push(new HtmlWebpackPlugin(conf));
}
```### Обертка HTTP запросов
Файл `http.js`:
```javascript
import axios from 'axios';
let instance = axios.create({
baseURL: process.env.BACK_BASE_URL,
timeout: 60 * 1000
});
console.log(instance);
// Интерцептор запроса
instance.interceptors.request.use(config => {
config.headers.authorization = `token`; // Устанавливаем токен в заголовках, который можно получить из vuex
});
return config;
}, error => {
console.log('Запрос завершился ошибкой... ', error);
return Promise.reject(error);
});
instance.interceptors.response.use(response => {
if (response.data.code === 200) {
// return response.data
} else {
console.log(response);
let err = new Error();
err.response = response;
return Promise.reject(err);
}
}, error => {
return Promise.reject(error);
});
const httpRequest = (url, data = {}) => {
return new Promise((resolve, reject) => {
instance.post(url, data)
.then(res => {
resolve(res);
})
.catch(error => {
if (error.response) {
if (error.response.status === 200) {
reject(error.response.data);
}
} else if (error.request) {
if (error.code === 'ECONNABORTED') {
// Toast({
// message: 'Запрос timed out, пожалуйста, обновите страницу и попробуйте снова',
// className: 'error-net',
// duration: 3000
// })
}
else {
console.log('Сеть отключена, проверьте соединение');
}
} else {
console.log('Нет ответа на запрос');
}
});
});
};
Вы можете оставить комментарий после Вход в систему
Неприемлемый контент может быть отображен здесь и не будет показан на странице. Вы можете проверить и изменить его с помощью соответствующей функции редактирования.
Если вы подтверждаете, что содержание не содержит непристойной лексики/перенаправления на рекламу/насилия/вульгарной порнографии/нарушений/пиратства/ложного/незначительного или незаконного контента, связанного с национальными законами и предписаниями, вы можете нажать «Отправить» для подачи апелляции, и мы обработаем ее как можно скорее.
Опубликовать ( 0 )