到此为止我们只有一个npm run build命令,但是我们写vue项目一般会有两个命令,一个npm run dev,启动开发环境,
一个npm run build 打包生产环境的代码。
- npm run dev 相当于把自己的电脑当中服务器,开启来一个服务供程序员开发调试
- 怎么在本地开启一个服务呢?需要下载webpack-dev-server 插件
- npm install webpack-dev-server --save-dev
- 在webpack.config.js文件里,添加devServer配置,contentBase指定本地服务器访问dist文件夹
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
entry: {
main: './src/main.js'
},
output: {
filename: '[name].js',
path: path.resolve(__dirname, 'dist'),
},
+ devServer: {
+ contentBase: path.resolve(__dirname, 'dist'),
+ host: 'localhost',
+ port: '8080'
+ },
以下代码省略跟之前一样....
- 修改package.json文件的scripts选项
"scripts": {
"dev": "webpack-dev-server --open webpack --config ./webpack.config.js",
"test": "echo \"Error: no test specified\" && exit 1"
},
- 执行 npm run dev
- 在浏览器访问localhost:8080
- 接下来我们会配置开发环境和生产环境不同的配置文件