vue项目部署

拼搏现实的明天。 2022-06-13 09:07 222阅读 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;
            }     
        }

发表评论取消回复

表情：

评论列表（有 0 条评论，222人围观）

还没有评论，来说两句吧...

相关阅读

相关 nginx部署vue项目

如何用Nginx部署Django 如果你在windows上开发的django项目。部署的话，需要分三步。第一步:在linux下下载python用的依赖包，搭建pyth

比眉伴天荒/ 2023年09月25日 08:59/ 0 赞/ 6 阅读

相关 Nginx部署Vue项目

> Nginx入门：[https://yuanyu.blog.csdn.net/article/details/91908913][https_yuanyu.blog.csdn

Bertha 。/ 2022年12月15日 12:51/ 0 赞/ 151 阅读

相关 docker 部署Vue项目

第一步：vue项目打包成dist。 ![20210728084305649.png][] npm run build 第二步：构建Dockerfile

清疚/ 2022年09月01日 12:54/ 0 赞/ 206 阅读

相关 vue项目部署

1、更改项目下config文件夹index.js文件(标红处两个位置) build: { env: require('./prod.env'),

拼搏现实的明天。/ 2022年06月13日 09:07/ 0 赞/ 223 阅读

相关 Nginx 部署Vue前端项目

1.Vue前端构建 ➜ npm run build 构建成功后基本会在配置的dist文件下生成静态html文件。 2.生成的静态代码上传到服务器把生成

迈不过友情╰/ 2022年05月21日 06:53/ 0 赞/ 264 阅读

相关 vue+nginx 项目部署

nginx路径映射配置省略。需要注意的点：npm run build之前，需要修改的地方：配置文件一：build>>utils.js (修改publicPath:"..

阳光穿透心脏的1/2处/ 2022年01月17日 02:27/ 0 赞/ 277 阅读

相关 node 本地部署vue项目

以express为例： var createError = require('http-errors'); var express = require('ex

秒速五厘米/ 2021年12月20日 14:19/ 0 赞/ 237 阅读

相关 Nginx部署vue项目

nginx.conf配置文件单个vue项目配置 user nobody; worker_processes

ゝ一纸荒年。/ 2021年11月05日 13:36/ 0 赞/ 338 阅读

相关 jenkins自动化部署vue项目

jenkins自动化部署vue项目一、搭建node环境 1. 下载linux版本的nodejs，并上传到linux下

朱雀/ 2021年09月28日 13:52/ 0 赞/ 674 阅读

相关 vue项目部署

开发完的vue项目，需要部署到Nginx/Tomcat服务器上运行，作为一个前端小白，刚接触vue不久，研究了一番，于是写下这篇文章，记录下来便于今后部署。 1.route

浅浅的花香味﹌/ 2021年09月02日 04:35/ 0 赞/ 433 阅读