Vue前端项目打包&Nginx测试上线项目

一、项目打包

• 使用的是脚手架vue-cli创建的项目，因此在项目中添加 vue.config.js 文件，并在文件中加上

//打包配置文件
module.exports = {
  assetsDir: 'static',
  parallel: false,
  publicPath: './',
};

•  在终端输入指令 npm run build，生成dist文件

二、Nginx测试上线项目（存放在中文路径）

• 下载  Nginx下载链接

•  打开解压好的下载文件

 

•  将 nginx.conf 文件在编译器打开

找到 server 字段 ，可以任意更改端口号 listen

 index.html文件指的是html文件中的index.html文件，将打包生成的dist文件内的index.html文件复制到nginx内html文件

• 启动nginx.exe文件

         犯了个错误，没有将nginx存放在中文路径的文件夹中，导致没能正常开启，将路径更改为英文后正常启动，可以在任务管理器查看

         还有一个无法正常启动的原因是端口号已经被占用，将端口号更改为空闲的即可

• 在页面中转到 localhost:端口号后遇到控制台报错404

        在nginx.conf的location字段中添加一段 

try_files $uri $uri/ /index.html;

         对.conf文件更改后需要重启nginx.exe，需要在任务管理器先结束任务