vue cli 빌드 후 운영 사이트 실행 방법
VueCLI 2를 사용하여 운영 환경으로 구축하고 있습니다.build.js는 200KB로 구축 및 컴파일됩니다.서버를 개발로 재실행했을 때 3MB가 로딩되어 있었습니다.dist 폴더 내의 build.js는 200KB일 것입니다.index.html을 열려고 했는데 작동하지 않고 웹 사이트의 루트 디렉토리로 리디렉션됩니다.
패키지json
"scripts": {
"dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
"build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
},
웹 팩
module.exports = { ...
module:{
...
plugins: [
new webpack.ProvidePlugin({
$: 'jquery',
jquery: 'jquery',
'window.jQuery': 'jquery',
jQuery: 'jquery'
})
],
devtool: '#eval-source-map'
},
...
}
if (process.env.NODE_ENV === 'production') {
module.exports.devtool = '#source-map'
// http://vue-loader.vuejs.org/en/workflow/production.html
module.exports.plugins = (module.exports.plugins || []).concat([
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: '"production"'
}
}),
new webpack.optimize.UglifyJsPlugin({
sourceMap: true,
compress: {
warnings: true
}
}),
new webpack.LoaderOptionsPlugin({
minimize: true
}),
new webpack.optimize.CommonsChunkPlugin({
name: 'vendor',
minChunks: function (module) {
return module.context && module.context.indexOf('node_modules') !== -1;
}
})
])
}
HTML
<body>
<script src="/dist/vendor.js"></script>
<script src="/dist/main.js"></script>
</body>
명령어
npm 빌드 실행
npm run dev
npm run build작성하다dist응용 프로그램의 프로덕션 빌드가 포함된 디렉터리입니다.
봉사하기 위해서index.html브라우저에서는 HTTP 서버가 필요합니다.
예를 들어 serve:
npm install -g serve
serve -s dist
기본 포트는 다음과 같습니다.5000단, 를 사용하여 조정할 수 있습니다.-l또는--listen플래그:
serve -s build -l 4000
문서:
- https://create-create-contrace-app.dev/deployment #static-server
- https://github.com/zeit/serve
- https://cli.vuejs.org/guide/deployment.html#previewing-locally
프로덕션 빌드는 Vue CLI의 툴을 사용하여 로컬에서 실행할 수 있습니다.단순히 다음 작업을 수행합니다.
vue-cli-service serve --mode production
편의상 패키지에 추가할 수 있습니다.json 스크립트:
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint",
"production": "vue-cli-service serve --mode production"
}
명령어:
$ npm run production
매우 쉽다express확장성과 확장성이 뛰어납니다.
설치하다
npm install -D express
작성하다
server.displaces
// optional: allow environment to specify port
const port = process.env.PORT || 8080
// wire up the module
const express = require('express')
// create server instance
const app = express()
// bind the request to an absolute path or relative to the CWD
app.use(express.static('dist'))
// start the server
app.listen(port, () => console.log(`Listening on port ${port}`))
실행
node server.js
빌드는 서버에 도입해야 합니다.따라서 vue-cli에는 빌드를 로컬로 실행할 수 있는 임베디드 방법이 없다고 생각합니다.
빌드를 로컬로 실행하려면 서버를 개별적으로 구성하고 다음과 같이 서버에서 빌드를 실행해야 합니다.
1) 아래 명령어를 사용하여 Lite 서버를 설치합니다.
$ npm install -g lite-server
2) 아래 스크립트를 패키지에 추가합니다.json
"lite": "lite-server –port 10001",
"start": "npm run lite"
3) 루트 디렉토리에 bs-config.js 파일을 만들고 아래 스크립트를 추가합니다.
module.exports = {
port: 3000,
server: {
baseDir: './dist'
}
}
4) 마지막으로 아래 명령어를 사용하여 실행
$ npm run start
Vue CLI 툴링 (vue-cli-service serve --mode production)은 아직 개발 파일을 제공하고 있는 것 같습니다만,process.env.NODE_ENV === 'production'.
내용물을 제공하다dist추가 패키지 설치 없이 다음 작업을 수행할 수 있습니다.
npm run build
npx serve dist
커스텀 포트 및 SSL 키/증명서 사용 시:
npx serve dist -l 8095 --ssl-cert .\cert.pem --ssl-key .\cert-key.pem
이 명령어를 에 삽입할 수도 있습니다.package.json,예.
"scripts": {
"serve": "vue-cli-service serve",
"prod": "npx serve dist",
...
}
그러면 다음 작업을 수행합니다.
npm run prod
언급URL : https://stackoverflow.com/questions/47034452/how-to-run-production-site-after-build-vue-cli
'programing' 카테고리의 다른 글
| Vuejs(vuex) 오류 알 수 없는 로컬 변환 유형 (0) | 2022.07.02 |
|---|---|
| 라라벨의 예.vue가 업데이트되지 않음 (0) | 2022.07.02 |
| Vue.js - 데이터 요청이 완료될 때까지 페이지 렌더링을 연기합니다. (0) | 2022.07.02 |
| 컴파일 시 sizeof() 결과를 C로 출력하려면 어떻게 해야 하나요? (0) | 2022.07.02 |
| 처리되지 않은 약속 거부 구문 오류 Internet Explorer (0) | 2022.07.02 |