vue 項(xiàng)目打包
1、配置打包的命令npm run dev，打包后會(huì)將文件生成在dist文件夾下
// package.json
"build": "webpack --config webpack.config.prod.js"
2、vue-loader 和 vue-template-compiler版本不一致報(bào)錯(cuò),vue-loader版本在10+ 則更新vue-template-compiler
npm upgrade vue vue-template-compiler
2、靜態(tài)文件、圖片的引入，跟vue文件中引入路徑保持一致，需要將靜態(tài)文件復(fù)制，通過插件來實(shí)現(xiàn)
// webpack.config.prod.js 添加了復(fù)制靜態(tài)文件插件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文件從當(dāng)前目錄跳出
<script src="../static/live2Dcat/l2dwidget.min.js"></script>
<script src="build.js"></script>
// 項(xiàng)目中的靜態(tài)圖片路徑
background: url("/static/images/light.jpg")
3、很多地方都有說的一個(gè)問題，目前我還沒發(fā)現(xiàn)有什么用，先改著。
// index.js 修改靜態(tài)文件生成目錄 "/" => "./"
build: {
// Template for index.html
index: path.resolve(__dirname, "../dist/index.html"),
// Paths
assetsRoot: path.resolve(__dirname, "../dist"),
assetsSubDirectory: "static",
assetsPublicPath: "./", //注
...
}
4、現(xiàn)在打開dist中的index.html 文件是能夠看到我們的項(xiàng)目首頁
上傳dist文件到阿里云服務(wù)(mac)
1、打開終端 可以看到窗口左上角的shell，新建遠(yuǎn)程連接，輸入賬戶信息后連接
2、上傳文件
注意： 在上傳文件之前，需要把目錄清空 Linux 刪除 rm -rf 文件（夾）名
put 本地文件路徑 遠(yuǎn)程文件路徑
這時(shí)文件上傳已經(jīng)成功，到ssh shell 上可以查看（ls命令查看當(dāng)前目錄下文件）。
3、 如果是壓縮包則需要進(jìn)行解壓
- 切換到上傳文件的目錄下
- 安裝 yum install unzip ;
- 執(zhí)行 zip 待解壓的包名
Nginx配置
1、我用的是ssh shell，打開并連接到阿里云服務(wù)，首先找到Nginx的配置文件，
-
輸入命令：ps -ef | grep nginx，master process 后就是配置文件nginx.conf的路徑；
nginx.conf.png - 執(zhí)行編輯命令vi /usr/local/nginx/conf/nginx.conf：打開配置文件
- 執(zhí)行命令i 進(jìn)入insert： 進(jìn)入輸入模式
- 通過鍵盤上下來逐行進(jìn)行查找和修改配置文件
- 按鍵盤左上角的ESC鍵：退出輸入模式
- 同時(shí)按w和q，后回車：保存了配置文件并退出。
默認(rèn)的配置文件 刪掉 不然總是占用接口 跳到默認(rèn)窗口！
我的配置文件（修改的部分）
- Nginx啟動(dòng)命令：service nginx start
- Nginx重啟命令：service nginx restart
- Nginx停止命令：service nginx stop
打開項(xiàng)目
訪問項(xiàng)目的本地的端口和Nginx的配置文件端口需要保持一致，訪問阿里云ip: 端口號(hào)，就可以看到項(xiàng)目了~
配置跨域
1、配置匹配規(guī)則以最長匹配優(yōu)先 所以api匹配到的會(huì)優(yōu)先匹配第二條規(guī)則，這里資源到dist目錄下查找，帶有api的接口請(qǐng)求由8081轉(zhuǎn)發(fā)到8090，這里的rewrite是將請(qǐng)求中的api去掉（因?yàn)槲业恼鎸?shí)的請(qǐng)求里沒有api）
2、啟動(dòng)后一直404，改了半天 各種注釋 ，后來 就成這樣了，打回之前的寫法也可以了，迷惑啊，跟router和rewrite的寫法都沒關(guān)系。
配置https
https://help.aliyun.com/document_detail/98728.html?spm=5176.2020520163.0.0.5072LSwoLSwojj
其中l(wèi)ocation配置項(xiàng)需要指定訪問路徑
