vue项目部署

拼搏现实的明天。 2022-06-13 09:07 271阅读 0赞

1、更改项目下config文件夹index.js文件(标红处两个位置)

build: {
        env: require('./prod.env'),
        index: path.resolve(__dirname, '../dist/index.html'),
        assetsRoot: path.resolve(__dirname, '../dist'),
        assetsSubDirectory: 'static',
        assetsPublicPath: './', //修改目录访问方式
        productionSourceMap: false,//false is Production Environment，修改为生产环境,文件减小80%以上
        // Gzip off by default as many popular static hosts such as
        // Surge or Netlify already gzip all static assets for you.
        // Before setting to `true`, make sure to:
        // npm install --save-dev compression-webpack-plugin
        productionGzip: false,
        productionGzipExtensions: ['js', 'css'],
        // Run the build command with an extra argument to
        // View the bundle analyzer report after build finishes:
        // `npm run build --report`
        // Set to `true` or `false` to always turn it on or off
        bundleAnalyzerReport: process.env.npm_config_report
      },

2、打包文件，npm run build ，之后会生成一个dist文件夹,即为打包好的文件，将文件放在磁盘中，配置nginx监听80端口，并指定服务名称

server_name

，最终可用kangqiao.kangqiao.com/index.html访问项目(需要在hosts文件中指定本地端口指向kangqiao.kangqiao.com)

hosts配置

127.0.0.1 kangqiao.kangqiao.com

nginx监听

server {
            listen       80;
    	server_name  kangqiao.kangqiao.com;
            proxy_set_header X-Forwarded-Host $host;
            proxy_set_header X-Forwarded-Server $host;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
              location / {
    	    root E:\\WebSvnProjects\\kangqiao-backend-web\\dist;
            }     
        }