Vue-cli脚手架下的项目搭建与本地测试的灵魂拷问

2024-01-14 18:17:12

俗话说，实践出真知。目前在练习Vue，利用vue-cli脚手架开发了个vue2.0仿唯妮海购项目，在生产环境中一切良好，项目暂时告一段落，根据官方的npm run build打包后发现，在自己没有线上服务器的情况下，测试成为一大难题。

因此，急需对Vue项目进行本地测试。

本地测试的灵魂拷问：如何优雅高效的解决项目测试？

本人推荐并详细演示http-server方式。

1.安装http-server

可通过npm全局方式安装http-server:

npm i http-server -g

2.项目打包

npm run build

3.启动项目

http-server dist

启动后，浏览器会自动跳转到打包的index.html文件。

若想让项目每次修改都可以热更新，可采取以下步骤：

在package.json下加入命令：

"serve": "http-server dist"

执行：

npm run serve

由于热更新需要webpack-dev-middleware和webpack-hot-middleware，同时在vue-cli3中并未默认引入webpack-dev-middleware和webpack-hot-middleware，因此我们需要手动安装。

npm install --save-dev webpack-dev-middleware webpack-hot-middleware

然后在build/webpack.base.conf.js文件中加入如下代码：

const webpack = require('webpack');
module.exports = {
  plugins: [
    new webpack.HotModuleReplacementPlugin(),
  ],
  devServer: {
    clientLogLevel: 'warning',
    historyApiFallback: true,
    hot: true,
    compress: true
  }
};

然后执行命令：

npm run serve

即可。

4.常见问题排查

问题一：浏览器访问空白

解决方法：关闭防火墙，或者将node.js加入到防火墙的白名单。

问题二：浏览器报错

这是因为浏览器默认禁止了dist文件夹下的静态资源跨域访问，解决方法有：

通过代理的方式

在vue.config.js中进行如下配置：

devServer: {
  //设置代理
  proxy: {
    '/api': {
      target: 'http://xxx.com/api',//目标代理接口地址
      ws: true,//websocket支持
      changeOrigin: true //允许跨域
    }
  }
}