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

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

在本地运行html文件，如果文件仅仅包含模板和样式，那么直接双击.html文件即可，但是一旦涉及到文件上传的情况，就会提示跨域等问题，如下图所示：

原因是浏览器的安全策略不允许从file://源加载本地脚本、图片、AJAX请求等资源，所以这就需要我们在本地开启一个服务器

VSCode的Live Server插件

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

启动的时候非常简单，右键.html文件，选择Open with Live Server，即会启动服务器并自动在浏览器打开页面，按钮位置如下图所示：

扩展的端口默认为5500，如下图所示：

现在执行上传，就不会出现CORS的问题了

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

Hbuilder(X)直接运行

如果开发使用的工具是Hbuilder(X)，那么直接在右上角选择运行→运行到浏览器→选择对应的浏览器即可，如下图所示：

默认的端口是8848，如下图所示：

上面两种方式都时候小的demo

vite或webpack

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

vite

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

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

文件夹会生成一个package.json，如下图所示：

注：这就算构建好一个node项目的基础了

2. 安装vite，执行命令npm i vite --save-dev，如下图所示：
   
   在文件夹内新建vite配置文件vite.config.js，并添加基本配置代码：

import { defineConfig } from 'vite';

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

3. 现在就可以启动项目了，输入npx vite，会在控制台输出运行链接，如下图所示：
   
   此时的端口是5173，如果想要设置端口，参考vite官网的服务器port设置

webpack

1. 使用webpack的第一步安装与vite一样，都是npm init -y，接着安装三个依赖，运行npm install --save-dev webpack webpack-cli html-webpack-plugin，如下图所示：
   
   html-webpack-plugin是一个非常有用的插件，它可以自动生成HTML文件，并自动注入打包后的js文件

2. 同添加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或其他文件类型，可以在这里添加规则
        ],
    },
};

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

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

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

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

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

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

6. 执行npm start运行，如下图所示：
   
   此时的端口是8080，如下图所示：
   

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

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

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