VUE学习8-生成dist-本地测试

Vue项目在构建完完毕后需要上线运行。这时需要将development下的代码检查错误后编译build。

生成dist文件步骤:

  1. 使用eslint检查和尝试进行语法修正。在项目文件夹中终端输入:npm run lint
  2. 生成dist生产环境文件。npm run build

本地对dist文件进行测试

测试使用express-generator。

express?express-generator的区别:

  1. express是一个node开发环境下的框架,需要配合项目,再start起来才能用。
  2. express-generator是一个工具,可以生成express项目。 安装后使用express命令调用。

express-generator生成测试框架步骤:

  1. 全局安装框架。sudo cnpm i express-generator -g
  2. 生成测试目录。在指定文件夹下(如新建专门用于测试的run-vue-cli)express 20200202 -e
  3. 在生成的测试目录20200202中安装node_modules。cd 20200202,cnpm i
  4. 将Vue build生成的dist文件夹内的内容,拷贝到测试目录20200202的public文件夹下。
  5. 测试目录下,启动express项目。npm start
  6. 浏览器访问localhost:3000即可查看dist目录的浏览器表现。
终端中使用express命令新建本地测试目录20200202
新建完测试目录后,需要手动安装node_modules
测试目录中,npm start启动项目