Vue 앱 배포 시 기본 경로를 변경하는 방법
나는 컴퓨터에서 문제없이 실행되는 Vue 2.0 웹 어플리케이션을 가지고 있지만, 루트 디렉토리에서 실행 중인 앱이 없으면 서버에서 작동할 수 없을 것 같아.
예: 'www.someserver.com/my-app/'대신 'www.someserver.com/'.
나는 이 기본 웹 팩 구성이 있는 웹 팩 단순 템플릿을 사용했다.어떻게 앱이 루트 대신 폴더에서 파일을 로드하는지 확인할 수 있는가?
철하여, 정리되어vue.config.js
module.exports = {
/* ... */
publicPath: process.env.NODE_ENV === 'production' ? '/my-app/' : '/'
}
철하여, 정리되어router.js
/* ... */
import { publicPath } from '../vue.config'
/* ... */
export default new Router({
mode: 'history',
base: publicPath,
/* ... */
})
원하는 URL로 이동할 때 서버가 이미 html/js 번들을 제공하고 있다고 가정하면...vue-roouter를 사용하는 경우, 거기에서 기본 경로도 설정해야 한다.
const router = new VueRouter({
base: "/my-app/",
routes
})
난 이해했다.나는 정말로 편집해야 했다.publicPath나의 입장.webpack.config.js, like so:
var path = require('path')
var webpack = require('webpack')
const ExtractTextPlugin = require("extract-text-webpack-plugin")
module.exports = {
entry: './src/main.js',
output: {
path: path.resolve(__dirname, './dist'),
publicPath: '/dist/',
filename: 'build.js'
},
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader',
options: {
loaders: {
}
// other vue-loader options go here
}
},
{
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/
},
{
test: /\.css$/,
use: ExtractTextPlugin.extract({
fallback: "style-loader",
use: "css-loader"
})
},
{
test: /\.(png|jpg|gif|svg)$/,
loader: 'file-loader',
options: {
name: '[name].[ext]?[hash]'
}
}
]
},
resolve: {
alias: {
'vue$': 'vue/dist/vue.esm.js'
}
},
devServer: {
historyApiFallback: true,
noInfo: true
},
performance: {
hints: false
},
plugins: [new ExtractTextPlugin("main.css")],
devtool: '#eval-source-map'
}
if (process.env.NODE_ENV === 'production') {
module.exports.output.publicPath = '/<REPO_NAME>/dist/';
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: false
}
}),*/
new webpack.LoaderOptionsPlugin({
minimize: true
})
])
}
조심해<REPO_NAME> publicPath에 있어서의 입장.production일부분할하다
다음으로, 나는 또한 내 링크를 업데이트해야 했다.index.html일반적인 상대 경로 대신 점-점-점-점-점-점-점-점을 사용하려면:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>listz-app</title>
<link rel="stylesheet" href="./dist/main.css">
</head>
<body>
<div id="app"></div>
<script src="./dist/build.js"></script>
</body>
</html>
이 구성은 배포에 사용됨Vue-cli 2.0Github Page에 웹 응용 프로그램.
이것은 최근에 나에게 문제가 되었다.그리고 위의 해결책은 효과가 없었다.
아래 해결책은 다음과 같다.vue 2.6그리고vue-router 3.1
내가 한 일은 이 git 이슈에서 제시된 바와 같이 상대적인 경로를 추가하는 것이었다.vue.config.js:
module.exports = {
publicPath: './',
// Your config here
}
그러나 라우터 보기가 렌더링되지 않아 라우터에 기본 경로를 추가해야 했기 때문에 이것이 전체 해결책은 아니었다.기본 경로는 다음과 같아야 한다.vue.config.js's publicPath, 그렇게 하기 위해location.pathname이 포럼 질문에서 제시된 바와 같이.다음에서 전체 해결 방법:router.js다음과 같은 경우:
mode: 'history',
base: location.pathname,
routes: [
// Your routes here
]
참조URL: https://stackoverflow.com/questions/53162491/how-to-change-basepath-on-deployment-of-vue-app
'programing' 카테고리의 다른 글
| vuej에 이미지 파일로 div 저장 (0) | 2022.05.03 |
|---|---|
| vuex의 동적 변수에 대한 속성을 보는 방법 (0) | 2022.05.03 |
| 중첩된 v-for의 카운터 증가 (0) | 2022.05.03 |
| Vue-roouter 2는 경로를 변경하지만 보기를 업데이트하지 않는가? (0) | 2022.05.03 |
| Vuex Getter가 업데이트되지 않음 (0) | 2022.05.02 |