Vue常用命令及nginx部署

一、常用命令

#安装vue
npm install vue@next
#初始化vue
npm i -g @vue/cli-init
#进入项目文件夹，创建项目vue_demo
vue init webpack vue_demo
#或使用vite构建项目
npm init vite@latest vue_demo -- --template vue
#启动项目
cd vue_demo
npm install
npm run dev
#构建项目，生成dist目录
npm run build
#打开网址，正常即是成功
http://localhost:8080/#/
#如果使用vite的网址是
http://localhost:3000/
#安装axios
npm install axios
#安装echarts
npm install echarts --save
#打包项目
cnpm run build
#组件库安装
npm install element-plus --save
#vuex安装
npm install vuex --save
npm install vuex@next --save
npm install highlight.js --save
npm install --save @highlightjs/vue-plugin #highlight的vue3依赖插件
npm install --save vue-highlightjs
npm install @element-plus/icons-vue
npm install @antv/x6 --save
npm install vue-router@4

 

二、centos安装node

wget https://nodejs.org/dist/v16.13.2/node-v16.13.2.tar.gz
tar zxvf node-v16.13.2.tar.gz
./configure --prefix=/usr/local/node/
make
make install

 

三、nginx部署vue

#安装nginx
https://nginx.org/en/linux_packages.html#RHEL-CentOS
#启动nginx
systemctl restart nginx.service
#vue 文件目录
/etc/nginx/conf.d/dist
#nginx重新加载conf
nginx -s reload

 

/etc/nginx/conf.d/default.conf

备注：/etc/nginx/conf.d/dist目录就是vue执行npm run build生成的dist目录

server {
    listen       8080;
    server_name  localhost;
​
    #access_log  /var/log/nginx/host.access.log  main;
    root /etc/nginx/conf.d/dist;
    location / {
        try_files $uri $uri/ @router;
        index  index.html index.htm;
    }
    location @router {
            rewrite ^.*$ /index.html last;
        }
​
    #error_page  404              /404.html;
​
    # redirect server error pages to the static page /50x.html
    #
    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   /usr/share/nginx/html;
    }
​
    # proxy the PHP scripts to Apache listening on 127.0.0.1:80
    #
    #location ~ \.php$ {
    #    proxy_pass   http://127.0.0.1;
    #}
​
    # pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
    #
    #location ~ \.php$ {
    #    root           html;
    #    fastcgi_pass   127.0.0.1:9000;
    #    fastcgi_index  index.php;
    #    fastcgi_param  SCRIPT_FILENAME  /scripts$fastcgi_script_name;
    #    include        fastcgi_params;
    #}
​
    # deny access to .htaccess files, if Apache's document root
    # concurs with nginx's one
    #
    #location ~ /\.ht {
    #    deny  all;
    #}
}

 

​