项目打包

如何将项目打包，配置到nginx服务器上去

一、将项目打包

1.在项目目录下新建vue.config.js文件，并配置该文件

module.exports = {
    /**
     * 设置在不同环境下打开目录的地址
     *  process.env.NODE_ENV === 'production|development'   表示生产环境
     *  'production'? '/': '/yuguoxy/' 三目运算符
     *  如果当前是在生产环境下，用根目录去访问 ’/‘
     *  否则是在开发环境下，访问路径在 ’/yuguoxy/‘ 子目录下
     *  生产环境访问目录  http://192.168.0.103:80/manger
     *  开发环境访问目录  http://192.168.0.103:8080/yuguoxy
     *  注意： 不同环境下访问路径时，端口号有差异
     */
    publicPath: process.env.NODE_ENV === 'production' ? '/manger': '/yuguoxy',
    // 编译打包输出文件路径 
    outputDir: 'dist',
    // 静态资源路径
    assetsDir: 'assets',
}

2.设置路由中的base值

• 注意：这里的base的值必须和vue.config.js文件中设置的publicPath的值一致

const router = new VueRouter({
  mode: 'history', // history模式
  base: process.env.NODE_ENV === 'production' ? '/manger' : '/yuguoxy/',
  routes
})

2.项目打包

打包代码，这样就会在该项目的文件夹下生产一个名为dist的打包好的文件夹

npm run build

二、将项目部署到nginx服务器上

其中部署方式有两种

1.第一种方式

（1）将dist文件放到nginx文件夹下

（2）设置生产环境访问的路径为根目录'/'

publicPath: process.env.NODE_ENV === 'production' ? '/': '/yuguoxy',

（3）因为nginx服务器的默认跟目录是nginx中的html文件夹，所以需要去设置nginx中的nginx.conf文件，修改根目录为dist文件夹

（4）直接用根目录路径去访问即可

• 注意：访问网址的时候要注意端口号是否一致
  http://192.168.0.101：8080/

2.第二种方式

（1）将dist文件夹放到nginx文件夹中的html文件夹下，并改名为生产环境下访问的地址名（manger）

• 这里的生产环境下的访问路径是/manger，故该文件夹改名为manger

publicPath: process.env.NODE_ENV === 'production' ? '/manger': '/yuguoxy',

（2）启动nginx服务器，并在网页中打开该网址

• 注意：访问网址的时候要注意端口号是否一致
  http://192.168.0.101：8080/manger