linux vue項目+npm run build + nginx

系統

環境

vue   nginx

步驟

1、打包vue項目

2、配置nginx

打包vue項目

1、項目配置   我們使用服務器的8000端口

2、修改配置文件

build/utils.js

if (options.extract) {
      return ExtractTextPlugin.extract({
        use: loaders,
        fallback: 'vue-style-loader',
        publicPath: '../../'    //增加
      })
    } else {
      return ['vue-style-loader'].concat(loaders)
    }

config/index.js

 build: {
        // Template for index.html
        index: path.resolve(__dirname, '../dist/index.html'),

        // Paths
        assetsRoot: path.resolve(__dirname, '../dist'),
        assetsSubDirectory: 'static',
        assetsPublicPath: './',

3、打包

# npm run build

打包成功會創建dist目錄

 4、上傳到服務器  

配置nginx

 4.1、進入nginx

4.2、復制默認的配置文件default.conf  -> fengtaoconf

# cp  default.conf fengtao.conf

# vim fengtao.conf   修改端口 和 路徑

不行的話就使用這種

server {
    listen 80;
    listen [::]:80;
    server_name m.yiqipingjia.com;
    
    location /medical
    {
        alias /usr/web/medicalApp/;
        index index.html index.php index.htm;
    }
    
    location /pc
    {
        alias /usr/web/medicalPc/;
        index index.html index.php index.htm;
    }
    location /business
    {
        alias /usr/web/business/;
        index index.html index.php index.htm;
    }
    location /hr     ## vue pro
    {
        alias   /usr/web/hr;
        try_files   $uri $uri/ @router;
        index  index.html;
    }

}

 

5、有的服務器還需控制台開啟端口

6、防火牆開啟端口

# firewall -cmd  --zone=public  --add-port=8000/tcp -permanent    //開啟端口

# systemctl  restart firewalld.service   // 重啟firewall

訪問