Linux 下 Nginx + Vue3.x 实现helloworld

who_am_i__

已于 2023-11-02 19:25:01 修改

阅读量128

点赞数

文章标签： linux nginx 服务器 vue.js html5

于 2023-10-04 00:57:24 首次发布

本文链接：https://blog.csdn.net/u012961612/article/details/133530688

版权

--添加Server并修改pid文件路径：

安装nginx

我们在linux进行安装Nginx服务。这里采用自己编译nginx源码的方式安装。

-下载nginx源码包：

nginx官方下载点：Index of /download/

这里我们选择nginx-1.18.tar.gz 下载安装。

使用wget命令行下载：

wget http://nginx.org/download/nginx-1.18.0.tar.gz

-解压并安装

tar 命令解压压缩包：

tar -xzvf nginx-1.18.0.tar.gz

切换到nginx-1.18.0 目录：

cd nginx-1.18.0

运行./configure，并引入http_ssl_module和http_gzip_static_module

 sudo ./configure --with-http_ssl_module --with-http_gzip_static_module

编译安装：

sudo make && make install

如果上面的命令得到如下输出，并且没有error信息说明安装成功。

cp conf/uwsgi_params \
        '/usr/local/nginx/conf/uwsgi_params.default'
test -f '/usr/local/nginx/conf/scgi_params' \
        || cp conf/scgi_params '/usr/local/nginx/conf'
cp conf/scgi_params \
        '/usr/local/nginx/conf/scgi_params.default'
test -f '/usr/local/nginx/conf/nginx.conf' \
        || cp conf/nginx.conf '/usr/local/nginx/conf/nginx.conf'
cp conf/nginx.conf '/usr/local/nginx/conf/nginx.conf.default'
test -d '/usr/local/nginx/logs' \
        || mkdir -p '/usr/local/nginx/logs'
test -d '/usr/local/nginx/logs' \
        || mkdir -p '/usr/local/nginx/logs'
test -d '/usr/local/nginx/html' \
        || cp -R html '/usr/local/nginx'
test -d '/usr/local/nginx/logs' \
        || mkdir -p '/usr/local/nginx/logs'
make[1]: 离开目录“/home/myname/Downloads/nginx-1.18.0”

配置nginx http server

我们可以通过修改nginx.config 文件配置我们的http server。

-修改nginx.conf

--添加Server并修改pid文件路径：

使用命令：sudo vim /etc/nginx/nginx.conf 打开nginx.conf在http配置块内添加如下配置：

pid /usr/local/nginx/logs/nginx.pid; #  修改pid文件存放路径，这项配置放在http同级块

server {
		proxy_cache off;
    	listen 8080; # 端口
		server_name localhost; # 服务名称这里使用localhost

	    location / {
       		root /home/myname/ninja/vue; # 应用主目录
	        index index.html; # index页面
    	}
}

上述配置添加一个http server 监听端口8080，跟路径为/home/myname/ninja/vue。记下这个路径，这是我们下面放vue代码的目录。

注意：pid 配置使用来指定nginx进程id保存的文件路径。这个配置在使用nginx -s stop时会用到。上面路径并不是绝对的，只要关闭服务的时候出现找不到pid文件的错误就修改这个配置就行了。

--修改权限

如果你是用root用户登录的请忽略，注意这里的修改权限是要使运行nginx服务的用户和代码根目录所属用户保持一致。

把一下文件属主和属组修改为当前用户：

sudo chown myname:myname /var/log/nginx/error.log
sudo chown myname:myname /var/log/nginx/access.log
sudo chown myname:myname /etc/nginx/nginx.conf
sudo chown myname:myname /var/log/nginx/logs -R

只要是在启动时报Permission denied错误的全部用chown命令修改属主。

运行nginx：

执行如下命令：

/usr/local/nginx/sbin/nginx -c /etc/nginx/nginx.conf # -c指定配置文件

这行命令执行完后会有警告如下：

nginx: [warn] the "user" directive makes sense only if the master process runs with super-user privileges, ignored in /etc/nginx/nginx.conf:1

这是由于使用非root用户运行导致的，可以忽略。

创建Vue Helloworld

-代码

在 /home/myname/ninja/vue 下新建文件01.html并把下载好的vue.global.js文件放到 ./js/libs/目录下

01html文件如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Hello World with Vue</title>
  <!-- 引入 Vue.js -->
  <script src="./js/libs/vue.global.js"></script>
</head>
<body>
    <div id="app">
      <div>{{ message }}</div>
      <div>{{hello}}</div>
    </div>
    

    <script type="module">
      const { createApp, ref } = Vue
    
      createApp({
        setup() {
          const message = ref('Hello vue!')
          return {
            message
          }
        },
        data(){ // data 必须是个函数
            return {
                hello: "Hello world!"
            }
        }
      }).mount('#app') // 创建一个VueApp 并将其挂在到id为app的dom 节点上，挂载后这个节点就会被Vue接管也可以使用class 选择器
    </script>
</body>
</html>