Vue项目部署到阿里云服务

vue 项目打包

1、配置打包的命令npm run dev，打包后会将文件生成在dist文件夹下

// package.json 
"build": "webpack --config webpack.config.prod.js"

2、vue-loader 和 vue-template-compiler版本不一致报错,vue-loader版本在10+ 则更新vue-template-compiler

npm upgrade vue vue-template-compiler

---

2、静态文件、图片的引入，跟vue文件中引入路径保持一致，需要将静态文件复制，通过插件来实现

// webpack.config.prod.js 添加了复制静态文件插件CopyPlugin 和html文件生成插件HtmlWebpackPlugin
plugins: [
        new CopyPlugin([
            { from: path.resolve(__dirname, './static'), to: path.resolve(__dirname, './dist/static') },
        ]),
        new HtmlWebpackPlugin({
            template: 'template.html', //生成的新的html文件所依赖的模板
            filename: 'index.html' //生成的新的html文件的名字
        })
    ]，
// template.html 模板文件 引入的js文件从当前目录跳出


// 项目中的静态图片路径
background: url("/static/images/light.jpg")

---

3、很多地方都有说的一个问题，目前我还没发现有什么用，先改着。

// index.js  修改静态文件生成目录 "/" => "./"
build: {
        // Template for index.html
        index: path.resolve(__dirname, "../dist/index.html"),

        // Paths
        assetsRoot: path.resolve(__dirname, "../dist"),
        assetsSubDirectory: "static",
        assetsPublicPath: "./",   //注
        ...
       }

4、现在打开dist中的index.html 文件是能够看到我们的项目首页

上传dist文件到阿里云服务(mac)

1、打开终端 可以看到窗口左上角的shell，新建远程连接，输入账户信息后连接

shell.png

amount.png

---

2、上传文件
注意： 在上传文件之前，需要把目录清空 Linux 删除 rm -rf 文件（夹）名
put 本地文件路径 远程文件路径

upload.png

这时文件上传已经成功，到ssh shell 上可以查看（ls命令查看当前目录下文件）。

---

3、 如果是压缩包则需要进行解压

• 切换到上传文件的目录下
• 安装 yum install unzip ;
• 执行 zip 待解压的包名

Nginx配置

1、我用的是ssh shell，打开并连接到阿里云服务，首先找到Nginx的配置文件，

• 输入命令：ps -ef | grep nginx，master process 后就是配置文件nginx.conf的路径；

  
  
  nginx.conf.png
• 执行编辑命令vi /usr/local/nginx/conf/nginx.conf：打开配置文件
• 执行命令i 进入insert： 进入输入模式
• 通过键盘上下来逐行进行查找和修改配置文件
• 按键盘左上角的ESC键：退出输入模式
• 同时按w和q，后回车：保存了配置文件并退出。

默认的配置文件 删掉 不然总是占用接口 跳到默认窗口！

我的配置文件（修改的部分）

Nginx.png

• Nginx启动命令：service nginx start
• Nginx重启命令：service nginx restart
• Nginx停止命令：service nginx stop

打开项目

访问项目的本地的端口和Nginx的配置文件端口需要保持一致，访问阿里云ip: 端口号，就可以看到项目了~

配置跨域

1、配置匹配规则以最长匹配优先 所以api匹配到的会优先匹配第二条规则，这里资源到dist目录下查找，带有api的接口请求由8081转发到8090，这里的rewrite是将请求中的api去掉（因为我的真实的请求里没有api）
2、启动后一直404，改了半天 各种注释 ，后来 就成这样了，打回之前的写法也可以了，迷惑啊，跟router和rewrite的写法都没关系。

image.png

配置https

https://help.aliyun.com/document_detail/98728.html?spm=5176.2020520163.0.0.5072LSwoLSwojj
其中location配置项需要指定访问路径