webck后端路由设置，后端websocket

webpack简单配置,路由配置,接口拦截配置,基本文件配置

context：webpack在查找相对路径文件时使用的根目录，默认为启动Webpack时的当前目录。Entry取值类型：支持单个入口、多入口。对象形式可根据键名生成多个chunk，支持动态配置。Output：filename：配置输出文件的名称，支持静态值和模板变量。chunkFilename：用于异步或动态代码打包的文件名称。

Entry： 配置模块的入口。Webpack从这里开始执行构建，搜寻并递归解析所有入口依赖的模块。1 context： Webpack在查找相对路径文件时，会以context为根目录。默认为启动Webpack时的当前目录，也可自定义。2 Entry取值类型： 单个入口使用字符串表示，多入口可为数组或对象形式。

安装与简单使用 Webpack：安装 Webpack：通过命令 npm install webpack webpackcli savedev 安装 Webpack 和 Webpack CLI。创建项目文件：建立基本的项目文件结构。编写代码：在 src 目录下创建 index.js 文件，并编写基础代码。配置 Webpack：创建 webpack.config.js 文件，设置入口和输出配置。

vue环境配置(vue环境配置教程)

1、vue.config.js配置 axiOS配置baseURL package.json配置打包、启动（json不可以再备注，我是为了方便理解）vuecli0配置环境变量------------------正文开始------------------ 开发项目时，经常会需要在不同环境中切换。

2、在Vite中，通过import.meta.env访问环境变量，而非Vue CLI中的process.env.xxx。Vite默认包含五个内置环境变量：ModE、BASE_URL、PROD、DEV、SSR。配置多环境：在package.json的scripts中，为不同的环境指定不同的启动和打包命令，如yarn dev：dev、yarn dev：uat、yarn dev：prod，并通过mode参数指定模式。

3、安装vue脚手架，这是自动搭建vue项目框架的工具。输入以下命令安装：安装完成后，输入vue -V（为大写的V），若出现版本信息，则表示安装成功。

4、首先，创建三个环境特定的配置文件：在项目根目录下，新建`.env`、`.env.test`和`.env.production`。这三个文件将分别用于存储不同环境下的变量。 接下来，打开并编辑这三个文件。

5、文件中使用 vue.use 方法引入 Vue Router 插件。在 APP.vue中放置 routerview 入口。配置 Pinia：在 main.js 文件中使用 Pinia 插件。在 src 目录下创建 store 文件夹，并在其中创建 store.js 文件。在页面组件中通过导入使用 Pinia store。通过以上步骤，即可完成 Vue3 项目的环境搭建与基本配置。

6、配置多个环境在Vue CLI项目中的步骤如下：在项目根目录下创建.env文件，用于存储默认环境下的配置信息。创建.env.development和.env.production两个环境配置文件，分别存放开发环境和生产环境的配置信息。

webpack多页面怎么使用

webpackConfig.plugins.push（plugin）；}）路由配置 在多页应用下，我们希望访问的是localhost：8080/a，而不是localhost：8080/a.html。

在Webpack配置文件中，将上述`externals`对象定义好后，将其添加到`return`语句中，或直接在配置项中定义。这样操作后，重新执行构建命令（如`npm run start`），Webpack将不再将依赖模块打包进最终的bundle.js，从而避免了重复引入的冲突，确保了应用的正常运行。

首先，我们准备了两个模板文件：index.html 和 login.html。这是实现多页面配置的基础。接着，为了实现多页面功能，我们需要在入口文件中进行调整，将原有的单入口文件扩展为两个入口，分别对应index.html 和 login.html。在创建入口文件后，我们需要导入HtmlWebpackPlugin插件，以确保模板文件的正确加载。

Webpack 在编译 Vue 文件时，关键在于入口和输出配置。为实现多页应用，首先在入口配置中增加 `babel-polyfill`，确保兼容低版本浏览器，避免使用默认仅转换新的 JavaScript 句法而不转换新 API 的情况。输出配置需分别针对开发和生产环境。

[prerender-spa-plugin]--微型Vue项目的SEO利器

1、prerenderspaplugin是优化Vue项目SEO和用户体验的一个有效插件。以下是关于prerenderspaplugin的详细解作用：预渲染SPA：prerenderspaplugin允许webpack预渲染单页应用，生成静态页面。提升SEO：通过生成静态页面，搜索引擎可以爬取到页面的所有内容，提升SEO表现。

2、使用prerender-spa-plugin之前，我们构建的网站是一个纯正的Vue CLI项目，采用webpack打包，并使用vue-router进行路由管理。由于目标浏览器不包括老版本IE和移动端浏览器，我们选择了hash模式的路由配置。在页面开发上，我们倾向于将单个页面分离为多个组件，以提高开发效率和后期维护性。

3、预渲染是为了解决单页面应用（SPA）的SEO问题，通过在打包时生成静态HTML文件，让搜索引擎更容易抓取和理解网页内容。对于Vue框架，可以使用prerender-spa-plugin插件实现预渲染。在使用过程中，可能会遇到下载无头浏览器失败的情况，为了解决这个问题，可以尝试使用cnmp进行安装。