暑期项目实训 2021-7-11

vue前端学习笔记----------搭建本地服务器

学习目标：

搭建本地服务器

学习内容：

1. webpack提供一个可选的本地开发服务器(基础node.js搭建), 内部使用express框架,可以实现让浏览器自动刷新显示我们修改后的结果
2. 它是一个单独的模块, 在webpack中使用需要先安装 npm install --save-dev
   webpack-dev-server@2.9.1
3. devserver也是作为webpack中的一个选项, 选项本身可设置如下属性 contentBase:
   为哪一个文件夹提供本地服务, 默认是根文件夹. 可填写 ./dist port: 端口号 inline: 页面实时刷新
   historyApiFallback: 在SPA页面中, 依赖HTML5的history模式

// 修改webpack.config.js文件
module.exports = {
    ...
    devServer: {
        contentBase: './dist',
        inline: true
    }
}

// package.json文件中再配置一个scripts,  open参数表示直接打开浏览器 
"scripts": {
    ...
    "dev": "webpack-dev-server --open" 
}