Vue项目部署到阿里云服务

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

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

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

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

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

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

2、上传文件

注意： 在上传文件之前，需要把目录清空 Linux 删除 rm -rf 文件（夹）名

put 本地文件路径 远程文件路径

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

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

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

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

1、配置匹配规则以最长匹配优先 所以api匹配到的会优先匹配第二条规则，这里资源到dist目录下查找，带有api的接口请求由8081转发到8090，这里的rewrite是将请求中的api去掉（因为我的真实的请求里没有api）

2、启动后一直404，改了半天 各种注释 ，后来 就成这样了，打回之前的写法也可以了，迷惑啊，跟router和rewrite的写法都没关系。

https://help.aliyun.com/document_detail/98728.html?spm=5176.2020520163.0.0.5072LSwoLSwojj

其中location配置项需要指定访问路径

请输入以下命令

cd /alidata/server/nginx/conf/rewrite

再输入：ll

看看是不是像下面截图的一样

对了。这些就是伪静态规则文件。我们打开phpwind.conf看看。

我们已经在rewrtie目录下配置了常见程序的伪静态规则。您可以直接调用。

如果没有就按照

程序名.conf的命名方式新建一个配置文件

配置文件搞清楚了，你可能会说好像网站伪静态还是没效果啊。别着急，因为伪静态规则是需要被网站配置文件调用才行的。

输入以下命令

cd /alidata/server/nginx/conf/vhosts

进入到网站配置目录

修改好伪静态调用文件

下面测试下我们配置的文件是否正确吧

输入：

/alidata/server/nginx/sbin/nginx -t

看到了么？

nginx: the configuration file /alidata/server/nginx/conf/nginx.conf syntax is ok

nginx: configuration file /alidata/server/nginx/conf/nginx.conf test is successful

如果出现以上两句话就说明配置成功了。下面重启下nginx

/alidata/server/nginx/sbin/nginx -s reload

恭喜您，伪静态配置完成！

总结，其实与其它自行安装的服务器区别在于相关文件目录位置问题了

---