vue-cliプロジェクトはNginxでパッケージ化およびデプロイされています
ビルド前に構成を変更
ビルド-> utils.js
// Extract CSS when that option is specified
// (which is the case during production build)
if (options.extract) {
return ExtractTextPlugin.extract({
use: loaders,
publicPath:'../../', //加上段代码，防止打包后丢失图片路径
fallback: 'vue-style-loader'
})
} else {
return ['vue-style-loader'].concat(loaders)
}
}
設定-> index.js
build: {
//...
// Paths
assetsRoot: path.resolve(__dirname, '../dist'),
assetsSubDirectory: 'static',
assetsPublicPath: './', //修改后路径
//...
}
src-> main.js：Element-UIなどの他の導入されたコンポーネントを使用する場合
import Vue from 'vue'
import App from './App'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import router from './router' //router要最后import，否则element样式可能会错乱
Vue.config.productionTip = false
Vue.use(ElementUI)
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})
パック
ターミナルのルートディレクトリで実行します。
npm run build
distフォルダーはプロジェクトのルートディレクトリの下に生成されます。これはパッケージ化されたプロジェクトです。展開するサーバーに渡します。どこにでも配置できます。C：\の下に置きます
vue-cliプロジェクトのconfig-> index.jsファイルの構成について詳しくは、次のブログを参照してください。
Nginxダウンロード
http://nginx.org/en/download.html公式ダウンロードリンク
サーバー上の圧縮ファイルを解凍し、解凍後にどこにでも置きます。
Nginxの設定
conf-> nginx.conf初期構成は次のとおりです。
http {
#...
server {
listen 80;
server_name localhost;
location / {
root html;
index index.html index.htm;
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root html;
}
}
#...
}
一般的に言えば、サーバーのコンテンツのみを変更する必要があります。
http {
#...
server {
#端口，可改动，但是此前要先查看想改动的端口是否被占用
#想要被其他用户访问的话记得设置服务器的安全组
listen 80;
server_name localhost;
location / {
#改动2-2：
try_files $uri $uri/ @router;
#改动1：这里改成打包好的dist文件夹的绝对路径
root C:\dist;
index index.html index.htm;
}
#改动2-1：路由重写，防止history模式下刷新页面404
# 但是这样改动之后在其他页面刷新/后退等操作都会回到index.html页面
location @router {
rewrite ^.*$ /index.html last;
}
#改动3：设置跨域
location /api {
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Nginx-Proxy true;
proxy_set_header Connection "";
#跨域访问的后端地址
proxy_pass http://120.xx.xxx.xxx:81;
#我们发送请求的url如果是形如'/api/getMsg?param=N'
#重写后就会变为'http://120.xx.xxx.xxx:81/getMsg?param=N'
rewrite ^/api/(.*)$ /$1 break;
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root html;
}
}
#...
}
個人的には、マスターするために書き換えが必要だと思います。学習するには、次のリンクを参照してください。
Nginxサービスを開始する
非圧縮のnginxフォルダーにあるnginx.exeを直接ダブルクリックしてサービスを開始するか、コマンドラインターミナルを使用できます。
nginx.exe所在目录> start nginx
その他のコマンド：
nginx.exe -s stop 不保存相关信息
nginx.exe -s quit 可保存相关信息
nginx.exe -s reload 修改配置后重启服务
netstat -aon|findstr "80" 查看端口有“80”字段的服务
taskkill /f /t /im nginx.exe 终止Nginx服务