Nginx部署Vue3.0项目

项目build

在项目根目录下，也就是和package.json同级的目录下新建一个文件vue.config.js，在里面写入如下代码(有特殊需求可根据注释做相关修改，一般来说下面的配置可以直接用)：

module.exports = {
  publicPath: process.env.NODE_ENV === "production" ? "./" : "./",
  outputDir: "dist",    //打包的目标目录
  assetsDir: "static",
  indexPath: 'index.html',
  // eslint-loader 是否在保存的时候检查
  lintOnSave: true,
  // 生产环境是否生成 sourceMap 文件
  productionSourceMap: false,
  // css相关配置
  css: {
    // 是否使用css分离插件 ExtractTextPlugin
    extract: true,
    // 开启 CSS source maps?
    sourceMap: false,
  },
  // webpack-dev-server 相关配置
  devServer: {
    open: false,//open 在devServer启动且第一次构建完成时，自动用我们的系统的默认浏览器去打开要开发的网页
    host: '0.0.0.0',//默认是 localhost。如果你希望服务器外部可访问，指定如下 host: '0.0.0.0'，设置之后之后可以访问ip地址
    port: 8080,
    hot: true,//hot配置是否启用模块的热替换功能，devServer的默认行为是在发现源代码被变更后，通过自动刷新整个页面来做到事实预览，开启hot后，将在不刷新整个页面的情况下通过新模块替换老模块来做到实时预览。
    https: false,
    hotOnly: false,// hot 和 hotOnly 的区别是在某些模块不支持热更新的情况下，前者会自动刷新页面，后者不会刷新页面，而是在控制台输出热更新失败
    proxy: {
      '/apis': {
        target: 'http://xxxx:8080', //目标接口域名
        secure: false, //false为http访问，true为https访问
        changeOrigin: true, //是否跨域
        pathRewrite: {
          '^/apis': '' //重写接口
        }
      }
    }, // 设置代理
    before: app => { }
  },
  // 第三方插件配置
  pluginOptions: {
    // ...
  }
};

2. 在项目根目录中，对项目进行打包npm run build，大多编译器都可以直接打包，如vscode
   

打包完成后，会在项目根目录下生成一个dist文件夹

Nginx配置文件修改

在你想使用的域名下添加一段代码

server {
	server_name www.xxx.com; #你的域名
    location /project/ {  #设置根目录，访问方式 域名/project 
            root /usr/share/nginx/html/;  #存放项目代码的位置，任意
            index  index.html index.htm;
            try_files $uri $uri/ /index.html;
    }
    # 是否需要跨域，不需要就不用管
    #location /apis {
        #    rewrite  ^.+apis/?(.*)$ /$1 break;
        #    proxy_pass  http://xxxx:8080;
        #    proxy_redirect off;
        #    proxy_set_header Host $host;
        #    proxy_set_header X-Real-IP $remote_addr;
        #    proxy_set_header X-Forwarded-For 	
        #    $proxy_add_x_forwarded_for;
     # }
}

nginx -s reload重启下nginx

差不多已经完成了

接下来就只需在服务器上的/usr/share/nginx/html/文件夹下新建文件夹project，将刚刚打包好的dist文件夹中的三个文件放到/usr/share/nginx/html/project下。

ok，现在通过域名/project访问你的项目吧！