前端基础：三种本地启动服务器的方式（解决本地跨域问题）

前端小王hs

已于 2025-05-10 19:59:33 修改

阅读量573

点赞数 18

分类专栏：笔记前端前端学习路线文章标签：前端前端小王hs javascript html5 服务器 vue

于 2025-05-10 19:56:39 首次发布

本文链接：https://blog.csdn.net/weixin_44001222/article/details/147857729

版权

笔记同时被 3 个专栏收录

139 篇文章

订阅专栏

前端

57 篇文章

订阅专栏

前端学习路线

6 篇文章

订阅专栏

前端小王hs：
清华大学出版社《后台管理实践——Vue.js+Express.js》作者 
网络工程师 前端工程师 项目经理 阿里云社区博客专家 

email: 337674757@qq.com
vx: 文章最下方有vx链接
资料/交流群： vx备注前端

三种本地启动服务器的方式

VSCode的Live Server插件
Hbuilder(X)直接运行
vite或webpack
- vite
- webpack

在本地运行html文件，如果文件仅仅包含模板和样式，那么直接双击.html文件即可，但是一旦涉及到文件上传的情况，就会提示跨域等问题，如下图所示：
CORS跨域
原因是浏览器的安全策略不允许从file://源加载本地脚本、图片、AJAX请求等资源，所以这就需要我们在本地开启一个服务器

VSCode的Live Server插件

如果开发时使用的VSCode，那么可以安装Live Server扩展，如下图所示：

启动的时候非常简单，右键.html文件，选择Open with Live Server，即会启动服务器并自动在浏览器打开页面，按钮位置如下图所示：
在LS打开
扩展的端口默认为5500，如下图所示：
5500
现在执行上传，就不会出现CORS的问题了

如果需要修改端口，可找到liveServer.settings.port属性进行修改，如下图所示：
修改LS端口

Hbuilder(X)直接运行

如果开发使用的工具是Hbuilder(X)，那么直接在右上角选择运行→运行到浏览器→选择对应的浏览器即可，如下图所示：
Hbuilder(X)直接运行
默认的端口是8848，如下图所示：
8848
上面两种方式都时候小的demo

vite或webpack

如果项目比较大，更为推荐使用构建工具如vite或webpack去启动服务器

vite

使用vite需要有node.js环境，这里不再叙述安装和配置node.js的步骤

新建一个文件夹，并执行命令npm init -y进行初始化，如下图所示：

文件夹会生成一个package.json，如下图所示：
初始化node
注：这就算构建好一个node项目的基础了

安装vite，执行命令npm i vite --save-dev，如下图所示：

在文件夹内新建vite配置文件vite.config.js，并添加基本配置代码：

import { defineConfig } from 'vite';

export default defineConfig({
  // 这里可以添加更多配置项
});

现在就可以启动项目了，输入npx vite，会在控制台输出运行链接，如下图所示：

此时的端口是5173，如果想要设置端口，参考vite官网的服务器port设置

webpack

使用webpack的第一步安装与vite一样，都是npm init -y，接着安装三个依赖，运行npm install --save-dev webpack webpack-cli html-webpack-plugin，如下图所示：

html-webpack-plugin是一个非常有用的插件，它可以自动生成HTML文件，并自动注入打包后的js文件
同添加vite.config.js一样，webpack也需要新增配置文件，名字为webpack.config.js，同时添加如下代码：

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    entry: './src/index.js', // 入口文件路径
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist'),
        clean: true,
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './src/index.html' // HTML模板路径
        }),
    ],
    module: {
        rules: [
            // 如果需要处理CSS或其他文件类型，可以在这里添加规则
        ],
    },
};

按配置文件，新增核心目录src，在src下面增加index.html文件和入口文件index.js，内容就是需要运行的内容

这里的一个小tips是，如果想要快速构建一个html模板，可以输入!，如下图所示：
快速生成html模板

在package.json修改启动命令，代码如下：

"scripts": {
    "build": "webpack"
}

如果需要hmr，就需要安装webpack-dev-server，并添加start命令，代码如下：

"scripts": {
    "start": "webpack serve --open",
    "build": "webpack"
}

执行npm start运行，如下图所示：

此时的端口是8080，如下图所示：

欢迎关注csdn前端领域博主: 前端小王hs，喜欢可以点个赞！您的支持是我不断更新的动力！🔥🔥🔥

前端小王hs：
清华大学出版社《后台管理实践——Vue.js+Express.js》作者 
网络工程师 前端工程师 项目经理 阿里云社区博客专家 

email: 337674757@qq.com
vx: 文章最下方有vx链接
资料/交流群： vx备注前端